This chapter is from the book
This chapter is from the book
This chapter is from the book
CSS Animations
As we’ve been doing throughout this book, let’s start with an example.
CSS Positioning
You’ll make a box slide across the screen from left to right in two ways. The first way will be to use CSS positioning (EXAMPLE 4.1).
Add a div with a class of box to your HTML.
<div class="box"></div>
Give the .box div dimensions and a background color so you can see it on the page. Set its position to absolute. Top and left values will be 0 by default, which is fine for this example.
.box { width: 200px; height: 200px; background-color: #393; position: absolute; }You need two components to create the animation. The first one declares the animation on .box. Part of the benefit of the animation property is the name of a keyframe where you’ll change properties, so you also need to create this keyframe, which is the second component.
Add the animation property to .box.
.box { -webkit-animation: slide 5s linear 0s 3; animation: slide 5s linear 0s 3; }The first value in the list is slide, which is the name of your keyframe.
Create the slide keyframe.
@-webkit-keyframes slide { from { left:0 } to { left: 600px } } @keyframes slide { from { left: 0; } to { left: 600px; } }Load the file in a browser.
A green square appears in the upper-left corner of your browser. As soon as the page loads, it moves 600 pixels to the right, jumps back to the upper-left corner, slides to the right again, and repeats a third time before finally returning to the upper-left corner and stopping (FIGURE 4.2).
FIGURE 4.2 Slide animation using the left property
)
The animation itself probably wasn’t very smooth, but you’ll get to that in a moment. Let’s talk about what the code is doing, starting with the keyframe.
The keyframe has the name slide. It includes two declarations for the left property, once in a from state and once in a to state. In the from state, the left value is 0, and in the to state, the value is 600px. The states from and to represent the start and end states, so initially the .box is positioned 0 pixels from the left edge, and at the end of the animation cycle, it is 600 pixels from the left edge.
To start the animation, you set the animation shorthand property on the .box div.
animation: slide 5s linear 0s 3;
The animation is calling the keyframe named slide, and it runs for a duration of 5 seconds. The timing-function is linear. There’s no delay, and the animation is set to run three times.
Smoothing the Animation
What about the jumpiness in the animation? Let’s modify the example to move the .box with a transform instead of changing the value of the left property (EXAMPLE 4.2). You need to adjust only the keyframe.
Replace the keyframe in step 4 of Example 4.1 with the following keyframe:
@-webkit-keyframes slide { to { -webkit-transform: translate(600px, 0px); -ms-transform: translate(600px, 0px); transform: translate(600px, 0px); } } @keyframes slide { to { -webkit-transform: translate(600px, 0px); -ms-transform: translate(600px, 0px); transform: translate(600px, 0px); } }In this code, the translate function moves the .box div 600 pixels to the right, the same as the left values did in the previous @keyframes rule. Notice that only the to state is included this time. You don’t need to include a from state. You really didn’t need it the first time either. The initial state of the .box div as set on the .box class is exactly what you want for the from state, so there isn’t a need to explicitly set it in the keyframe.
Reload your page with this new keyframe.
The same thing happens as before: A green .box moves 600 pixels to the right three times (FIGURE 4.3). However, this time the animation runs smoother. We’ll get to why at the end of the chapter. For now just know there are multiple ways to create an animation (or a transition), but the performance of each way can vary.
FIGURE 4.3 Slide animation using translate function
)
As you can see in the example, animations can reset CSS property values inside their keyframes. Transitions can’t do this. Although CSS animations affect property values while running, they don’t by default control values before the animation starts or after it ends. By default, the intrinsic styles (styles added directly to the element and not inside keyframes) of the element control the values outside the time the animation is running. The styles set in the keyframe are in control while the animation is running, but not necessarily before or after. You do have a measure of control to change the default.
It’s possible to have multiple animations running at the same time and for each animation to set different values on the same property. When this happens, the animation defined last in the list of keyframe names overrides the other animations, and the value it sets is used.
Animations can start in one of two ways:
- On page load
- In reaction to a CSS property change
The start time of an animation is the latter of the time when the style specifying the animation changes (changing the element on hover for example) or the time the document’s load event is fired—in other words, automatically after the page has loaded.