💡 Animate newly added HTML elements with CSS

We all have been in a situation where we need to animate newly added HTML elements. We tinker with timeouts, initial state or any other scripting logic to add/remove classes etc.

If you want a simple solution, here is one for you. It only uses a single animation keyframe to take care of the newly added elements. CSS Animations with take care of the default state based on the initial element styles.

@keyframes animate {
  100% {
    opacity: 1;
  }
}

You can also play with the properties using css transforms to achieve the animation you need.

In the example below you have 2 versions.
Normal Item which uses opacity to create a fadeIn effect while the Fancy Item also has some transform properties attached to it.

Enjoy! :)