Day 28 of #100DaysOfCode…
Started a course on CSS Animations…lets dive right in!!!
Topics: Transform,Transitions and Keyframes.
CSS Animations: makes animating web development much easier,it eliminates the need for JavaScript/jquery for lots of animation effects.
Transform: we can use transform to add stretch to an element or change the co-ordinates of an element. we have various properties under transform like(the translate(),the rotate(),the scale() etc..)
Transition: transition takes an element from one state to another and how the element transitions between the two states.
Keyframes: keyframes are basically the power house of the CSS animations,this is like where the cooler things are in animations,we can do absolutely many things with (@keyframes). lets take a look at the example below.
Note: we must give the animation name to the keyframe for it to work just like i did in the example above.
Animation fill mode: decides what to do with the element outside the animation window and it can take properties like animation-fill-mode(backwards,forwards or both) which in the example i gave i used both.
that’s it for this article,dont forget to clap if you enjoyed my article and follow me on medium too.
thanks.
chibueze ukaegbu Ugwuanyi Chidera CSS Design Awards CSS Weekly Manish Salunke — CSS Matter
