Mastering CSS Animation with 'animate-timeline'
Adding animation to your website can make it look super cool and engaging. There are many ways to animate stuff using CSS, but one of the most powerful methods is using animate-timeline. This method gives you a lot of control and precision, making it perfect for creating complex animations. In this blog, we’ll go over the basics of animate-timeline, how to make animations accessible with motion-reduce, and show you some examples to get you started.
What is CSS animate-timeline?
CSS animate-timeline is a technique that uses keyframes and timelines to create detailed and synchronized animations. Unlike basic CSS animations that use the animation property, animate-timeline lets you organize and layer animations more effectively, which is great for complex animations involving multiple elements.
Basic Concepts
Before we dive into examples, let’s cover the basics:
Keyframes
Keyframes define the different stages of an animation. You set them up using the @keyframes rule.
@keyframes example {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}
Animation Properties
CSS has several properties to control animations, such as animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction.
.element {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
Timeline
The timeline helps you coordinate multiple animations. By aligning keyframes on a timeline, you can sync up animations perfectly.
Creating a Basic Animation with animate-timeline
Let’s start with a simple example where a box moves horizontally and changes its color.
HTML
<div class="box"></div>
CSS
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: move 4s infinite, changeColor 4s infinite;
}
@keyframes move {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
}
@keyframes changeColor {
0%,
100% {
background-color: #3498db;
}
50% {
background-color: #e74c3c;
}
}
In this example, the .box element moves horizontally and changes color at the same time. The animation property lets both animations run together.
Using animate-timeline for Synchronized Animations
Next, let’s create a more complex scenario where multiple elements animate in sync.
HTML
<div class="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
</div>
CSS
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
}
#box1 {
animation: move1 6s infinite;
}
#box2 {
animation: move2 6s infinite;
}
#box3 {
animation: move3 6s infinite;
}
@keyframes move1 {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(200px);
}
}
@keyframes move2 {
0%,
100% {
transform: translateY(0);
}
25%,
75% {
transform: translateY(200px);
}
}
@keyframes move3 {
0%,
100% {
transform: translateY(0);
}
33%,
66% {
transform: translateY(200px);
}
}
Here, we have three boxes, each with its own animation. By staggering the keyframes, we create a cascading effect where each box moves at a different time but still looks coordinated.
Making Animations Accessible with motion-reduce
Not everyone loves animations. Some people find them distracting or even disorienting. That's why it's important to respect users' preferences by using the prefers-reduced-motion media query. This way, we can provide a more comfortable experience for everyone.
CSS with motion-reduce
@media (prefers-reduced-motion: reduce) {
.box {
animation: none;
}
}
With this media query, if a user has set their system to reduce motion, the animations will be turned off.
Updated CSS Example
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: move 4s infinite, changeColor 4s infinite;
}
@keyframes move {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
}
@keyframes changeColor {
0%,
100% {
background-color: #3498db;
}
50% {
background-color: #e74c3c;
}
}
@media (prefers-reduced-motion: reduce) {
.box {
animation: none;
}
}
In this updated example, if a user prefers reduced motion, the animations will not run, making the experience more accessible.
Advanced Timeline Control with JavaScript
For even more control, you can use JavaScript to manage timelines. The Web Animations API is great for creating and controlling animations programmatically.
HTML
<div class="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
</div>
CSS
.container {
display: flex;
justify-content: space-around;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
}
JavaScript
const box1 = document.getElementById("box1");
const box2 = document.getElementById("box2");
const box3 = document.getElementById("box3");
const animateBox = (box, delay) => {
box.animate(
[
{ transform: "translateY(0)" },
{ transform: "translateY(200px)" },
{ transform: "translateY(0)" },
],
{
duration: 2000,
iterations: Infinity,
delay: delay,
easing: "ease-in-out",
}
);
};
animateBox(box1, 0);
animateBox(box2, 500);
animateBox(box3, 1000);
In this example, each box starts its animation with a different delay, creating a staggered effect. The Web Animations API gives you precise control over the timing and sequence of animations.
Conclusion
CSS animate-timeline is a fantastic way to create complex and synchronized animations on your web pages. By mastering keyframes, animation properties, and timelines, you can bring your designs to life with dynamic and engaging effects. Plus, by using prefers-reduced-motion, you ensure that your animations are accessible to everyone.
To see the example animations in motion (pun intended), look for the CodePen's below.
The No-Framework WebApp workshop Coltbaan 4C, 3439NG Nieuwegein