Today were going to go over CSS3 Animation fundamentals.
CSS3 Animation key terms:
@keyframes - Specifies the animation
animation - A shorthand property for all the the animation properties, except the animation-play-state property
animation-name - Specifies the name of the @keyframes animation
animation-duration - Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0
animation-timing-function - Describes how the animation will progress over one cycle of its duration. Default “ease”
animation-delay - Specifies when the animation will start. Default 0
animation-iteration-count - Specifies the number of times an animation is played. Default 1
animation-direction - Specifies whether or not the animation should play in reverse on alternate cycles. Default “normal”
animation-play-state - Specifies whether the animation is running or paused. Default “running”
animation: myAnimation (name) 30s (duration) linear (timing function) infinite (iteration count) alternate (direction); Everything with in the parentheses is to to help you understand.
DON’T FORGET BROWSER PREFIXES!!!