Animation
This entire section is optional. If you are interested in learning the basics of CSS animation, feel free to dive in, but it is not required for this course or any of your projects.
Basics
Using animation in CSS requires two steps:
- First, you must apply a set of animation properties or the
animation
shorthand, including a name for your animation. - Then, you need to breakdown the animation sequence using CSS keyframes.
Let’s look at a very basic example of a CSS animation.
The CSS for each step to create this animation is detailed below.
Step one
div {
/* The basic styles for the element */
background-color: #A2F1C1;
height: 60px;
/* Animation specific styles */
animation: slideIn 4s linear infinite;
transform-origin: left center;
}
The animation
shorthand property here includes:
- the
animation-name
ofslideIn
; this is a custom name that you create - the
animation-duration
– in this case, 4 seconds - the
animation-timing-function
oflinear
- the
animation-iteration-count
ofinfinite
; the default for animations is1
unless you use this property or set this value in your shorthand
Additionally, since this animation uses CSS transformations, an origin for the transformation is set using the transform-origin
property.
Step two
The above code has no effect unless an @keyframes
rule with a matching name exists. In this case, that code looks like this:
@keyframes slideIn {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
Two important things to note about keyframes
:
- This code is written without a selector because the
slideIn
animation could be used by multiple HTML elements. - Just like media queries, you want to write valid CSS inside your
keyframes
.
Accessibility and animations
Some individuals have vestibular disorders and may experience nausea or other signs of physical discomfort when web pages include animations. Users can specify in their operating system/device settings if they prefer to experience things with less/reduced motion and, since you don’t want your designs to make someone physically ill, you should always write your CSS to respect those settings.
To do this, you can use a media query and the prefers-reduced-motion
feature. For the demo above, it looks like this:
@media (prefers-reduced-motion) {
div {
animation: none;
}
}
For roughly the last year, browsers have been supporting this media feature; see Can I Use for specific details.
More resources
- Eka’s demo of a basic CSS animation
- Flavio’s CSS Animations Tutorial
- Animate.css is a CSS library of specific animation styles
- Note that if you want to use this in your projects, you should follow the instructions for using their CDN
- MDN docs on using CSS animations