Day 29 of #100DaysOfCode

Topics: Still on CSS Animations…(Repeating animations,animation direction,animation-timing-function,animation-shorthand…

Macanthony Okeke
LearnFactory Nigeria
1 min readOct 10, 2018

--

Repeating Animations: animation-iteration-count enables the animation to occur for the specified amount of time..

Note: we either pass in the number of times we want the animation to occur into the animation-iteration-count property or pass in the infinite property which will make the animation to run non-stop.

Animation Direction: Animation Direction properties(reverse,alternate-reverse etc) can be used to control the direction or flow of the animated element.

we can see the reverse properpy passed in to the animation-direction

Animation Short Hand: animation short hand is a way we can do all our animations in just one property which is the animation property.

Animation short hand

Animation Timing Functions: this determines the rate at which the element that's been animated , goes from point a to b.

Animation-timing-function

That’s it for today’s article ,don’t forget to clap and share if you enjoyed reading it..thanks

chibueze ukaegbu Ugwuanyi Chidera SmartZoe HTML Résumé CSS Hero

--

--