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! :)
Top comments (0)