Animation Property

• Similar as transition
• animation: -name- time style delay fillmode repetition
• animation: color-change 1s linear forwards 1/alternate
• animation-name:
• animation-duration
• animation-timing-function
• animation-direction: alternate
• animation-iteration-count: infinite, 1, 4...
• animation-delay: .5s
• @keyframes: name o%{} 100{} from{} to{}
• animation fillmode: forwards, backwards, both
• forwards: the animation will keep the value of 100%
• backwards:
• both:
• alternate, infinite, number (default1)
• animation-play-state: paused. When using infinite it stops the animation, for example when hovering
• multiple animations
• fonts are not very good for calculate as performance. Height, margin, padding, width... it's not very efficient. Better transform