Blur CSS Filter – a game changer for my UI

This is such a cool effect, bringing an object (usually a div) up on screen

@keyframes blurEffect {
    from {
      filter: blur(16px);
    }
    to {
      filter: blur(0px); 
    }
  }

  .blur {
    animation: blurEffect 0.5s ease-in forwards;
    -webkit-animation: blurEffect 0.5s ease-in forwards;
}

<div class="blur">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec justo aliquet, porta nisi quis, sollicitudin nisl. Nunc ac molestie odio. Phasellus vitae commodo leo, quis accumsan eros. Curabitur at nisi pulvinar, tempus odio vel, ullamcorper neque. Ut scelerisque semper rutrum. Etiam odio elit, malesuada eget lobortis id, efficitur id metus. Praesent suscipit efficitur faucibus.
</div>