We notice motion—it's hardwired in our brains. Turning your head when you see someone waving or ducking for cover when a ball is coming at you is a reflex you can't really fight. That's why web animation is such a powerful tool. When done thoughtfully, it can draw attention to important parts of your website in an engaging and meaningful way.
Animation is the state of having life or vigor. In web design, this can be achieved through CSS. CSS animations allow you to bring most HTML elements to life without having to know JavaScript.
In traditional animation, keyframes are drawings that define the start and endpoints of a transition. They do the same thing in CSS animation. They define the properties of an element at each stage of the animation timeline.
A CSS property is a name and a value, separated by a colon. Properties dictate which aspects of an element will be changed visually. There are special properties that make animation possible in CSS.
To bind CSS animations to HTML elements, you can use the @keyframes rule. You can specify which styles you would like to apply at certain times. With two or more keyframes in place, the style configurations will change gradually from one to the other, moving through the snapshot at each keyframe along the way.
Keyframes are denoted with percentages. 0% marks the beginning of an animation cycle, and 100% marks the end of it. 1-99% is every point in between. You can separate percentages with commas to assign properties to multiple points in time. This tactic can be useful when creating a loop, where you would want the style configurations to end exactly where they started.
@keyframes background{
0%, 100%{
background-color: white;
}
50%{
background-color: gray;
}
}
specifies the name of the @keyframes animation that will be applied to the element
div{
animation-name: example
}
specifies the length of time one cycle of animation will take to complete
- [time]
in seconds or milliseconds
- initial
sets property to default value
- inherit
inherits value from parent element
specifies the speed curve of the animation and establishes preset acceleration curves
- ease
default value, fast middle with slow beginning and end
- ease-out
slow end
- ease-in
slow beginning
- ease-in-out
slow beginning and end
- linear
same speed throughout
- cubic-bezier(x1, y1, x2, y2)
lets you define custom values for a cubic bezier function
specifies how long the browser should wait after loading the element to begin the animation
- [time]
in seconds or milliseconds
specifies whether an animation should be played forward, backward, or in alternate cycles
- normal
default value, animation plays forward
- reverse
animation plays backwards
- alternate
animation reverses direction with each passing cycle, going forward on odd iterations and backward on even iterations
- alternate-reverse
animation reverses direction with each passing cycle, going forward on even iterations and backward on odd iterations
specifies the number of times an animation should be played in a loop
- initial
sets the iteration count to the default value
- [number]
specifies a number of iterations (the default value is one)
- infinite
animation repeats an infinite number of iterations on a loop
- inherit
inherits the value from the parent element
specifies a style for an element when the animation is not playing, either before it starts, after it ends, or both
- none
no styles are applied to the element before or after the animation
- backwards
element will retain the style values that are set by the first keyframe
- forwards
element will retain the style values that are set by the last keyframe
- both
animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
- inherit
inherits the value from the parent element
- initial
sets the iteration count to the default value
specifies whether the animation is running or paused
- running
animation is running
- paused
animation is paused
To create animations that only play when the user hovers over an element, you can use CSS transitions. Code the styles for an element like you usually would, and then code different styles for the element with the :hover selector after it.
The :hover selector is most commonly used with links, but it can be used on all elements to create interesting and engaging animations. When the user passes the cursor over an element with a hover state, the styles of the element will change from those originally assigned to the ones assigned to the hover state. When the user moves the cursor away, the styles will return to their original values.
div{
background-color: white;
}
div:hover{
background-color: gray;
}
specifies the name of the CSS properties to which transitions should be applied
div{
teansition-property: width
}
specifies the length of time a transition will take to complete
- [time]
in seconds or milliseconds
- initial
sets property to default value
- inherit
inherits value from parent element
specifies the speed curve of the animation and establishes preset acceleration curves
- ease
default value, fast middle with slow beginning and end
- ease-out
slow end
- ease-in
slow beginning
- ease-in-out
slow beginning and end
- linear
same speed throughout
- cubic-bezier(x1, y1, x2, y2)
lets you define custom values for a cubic bezier function
specifies how long the browser should wait after the user hovers over the element to begin the transition
- [time]
in seconds or milliseconds
- initial
sets property to default value
- inherit
inherits value from parent element