CSS 56 💻 animation properties part 1

Thanks for watching.
Any thoughts? Write a comment.
If you liked the video, Like and Subscribe.
It helps to create more videos!

### 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.

#css #css3 #csscourse #html #html5 #omg

Видео CSS 56 💻 animation properties part 1 канала Tuts