【My Study Note】CSS Animation
CSS Programming
CSS Animation
@keyframe Rule (Control the timing of animation)
/* Pattern 1 */
@keyframes animationName {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* Pattern 2 */
@keyframes animationName {
from {color: blue;}
to {color: red;}
}
Animation links to a specific keyframe rule
/* Syntax */
animation: name duration timing-function delay iteration-count direction fill-mode play-state
/* Example */
div {
animation: animationName 3s infinite
}
Animation Default Values
- animation-name: none
- animation-duration: 0s
- animation-timing-function: ease
- animation-delay: 0s
- animation-iteration-count: 1
- animation-direction: normal
- animation-fill-mode: none
- animation-play-state: running
- animation-timeline: auto
animation-direction
animation-direction: normal|reverse|alternate|alternate-reverse;
- normal: Default value. The animation is played as normal (forwards)
- reverse: The animation is played in reverse direction (backwards)
- alternate: The animation is played forwards first, then backwards
- alternate-reverse: The animation is played backwards first, then forwards
CSS Programming
