CSS animations let you animate from one style to another. Like traditional animation, keyframes are utilized and can be used to manipulate properties such as transformations, transitions, timing, repeats, and more.
Well done animations can enhance the user experience and add character to a website. It can be a powerful tool to draw attention to certain content and elicit greater emotional responses from users.
Keyframes form the foundation to creating CSS animations, defining what the timeline of the animation will look like.
Properties assign keyframes to elements and define how they are animated. The two essential properties for an animation to function are animation-name and animation-duration.
defines the name of the animation.
defines the duration of the animation, in seconds or milliseconds.
div {animation-name: name; animation-duration: 5s;}
uses the values to and from, as well as percentages to define keyframes.
@keyframes name {from {background-color: red;} to {background-color: yellow;}}
@keyframes name {0% {background-color: red;} 50% (background-color: green;} 100% {background-color: yellow;}}
note: if no duration is specified, the animation will have no effect.
note: it is good practice to use prefixes (-moz- and -webkit-) to ensure animations function across browsers.
specifies a delay for the animation, in seconds or milliseconds.
specifies if animation plays forward, reverse, or in alternate cycles.
animation plays forward (default)
animation plays backwards
animation reverses direction every cycle, playing forward on odd cycles and backwards on even cycles
animation reverses direction every cycle, playing backwards on odd cycles and forward on even cycles
specifies if the animation styles are visible before or after the animation plays.
the animation does not apply any styles to the element, before or after the animation
before the animation, the styles of the initial keyframe are applied to the elements
after the animation, the styles in the final keyframe are retained by the element
the animation follows both the backwards and forwards rule, extending the animation properties before and after the animation
specifies the number of times an animation runs.
sets the iteration count to default value
specifies a number (default is 1), in this case, 3
animation repeats forever
inherits the value from the parent
specifies whether the animation is playing or paused, a paused animation starts where it left off.
the animation is currently running
the animation is currently paused
specifies the speed curve of the animation.
slow start, then fast, then slow end (default)
same speed from start to end
slow end
slow start
slow start and end
define your own values in a cubic-bezier function