CSS 56 💻 animation properties part 1

a – animation-delay and duration

• animation-name property specifies the name of the @keyframes rule that defines the animation sequence
• you can specify multiple rule names separated with a ‘,’
• animation-name: slideIn; → specifies the rule name
• animation-duration specifies the length of time it takes for an animation to comple one cycle
• values: auto → for time-based animations, fills the entire timeline
• or value specifies in either s or ms
• animation-duration: 2s; →sets the animation duration to 2 seconds

b – animation-timing-function and delay

• animation-timing-function controls how an animation progresses through its duration
• It defines the speed curve of the animation, making it possible for animations to accelerate, decelerate…
• or maintain a constant speed.
• animation-timing-function: ease-in-out; → sets the animation to slow start and slow end
• animation-delay specifies the amount of time that should elapse before an animation starts playing
• This can be specifies in s and ms
• You can specify a negative value. -2s it will start the animation immediately but 2 secs in the animation
• animation-delay: 1s; → 1 sec animation delay

c – animation-iteration-count and direction

• animation-iteration-count specifies the number of times an animation should repeated
• values: infinite → will repeat for ever
• number → you can speficy an integer and a non-integer number. 0.5 will play half animation
• animation-iteration-count: 3; → will repeat the animation 3 times
• animation-direction swhether the animation should play forwards, backwards, or alternate between both directions.
• values: normal, reverse, alternate, alternate-reverse
• animation-direction: alternate-reverse; → Moves backward on odd iterations and forward on even iterations.