Скачать или смотреть 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