CSS 2D Animation in CSS

A 2D animation is the type of animation that has only two dimensions (i.e., x and y), although it can communicate the illusion of depth through, for example, drop shadows. A square moving from one location to another or a 2D object changing shape is an example of a basic 2D animation. Various things are animated in computing, including objects and characters, but, as of time of writing, CSS for all intent and purposes only supports the animation of objects. Many standard CSS properties can be animated. Lists of properties that can be animated can be found on the Web (e.g., at w3.org/TR/css3-transitions). The way animations are created in CSS is through using the ©keyframes at-rule in combination with animation properties, or the transition and transform properties.

1. @keyframes

The ©keyframes at-rule lets you control the intermediate steps in an animation sequence by specifying the positions of keyframes (i.e., a list of keyframes) and the properties to be animated. The values it takes are listed in Table 18.1.

In order for keyframe lists to be valid, they must contain at least 0% (or from) and 100% (or to), as the two define the animation sequence. Figures 18.3 through 18.5 show examples of how the values are used with the ©keyframes at-rule, assuming the identifier of the animation to be applied to the selected element is “shake.” In Figure 18.3, the ©keyframes shake {} rule says to make the background of the element to which the shake animation is applied red at 0% keyframe, blue at 50% and also scale the
size of the element to 2, and green at 100% as well as scale the element back to its initial size. When a property is specified at a keyframe but not specified in the succeeding one, the property’s initial value is assumed.

In Figure 18.4, the ©keyframes shake {} rule similarly specifies to make the background of the element to which the shake animation is applied red at 0% keyframe, blue at 50%, and green at 100%.

In Figure 18.5, the ©keyframes shake {} rule says to make the background of the element to which the shake animation is applied red at 0% keyframe and green with opacity of 0.5 at 100%.

2. Animation Properties

CSS animation properties are used to define how an animation should progress, which involves specifying duration and timing of the animation and its other behaviors. These properties include animation-name, animation-duration, animationtiming-function, animation-delay, animation- iteration-count, animation-direction, animation-fill-mode, and animation- play- state. Table 18.2 lists their function.

TABLE 18.2

Animation Properties

The shorthand animation property, which is also non-inherited, can be used to specify the properties in the table. The properties are specified as a space-separated list that contains [animation-name] [animation-duration] [animation-timing- function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state]. The order is not mandatory, but it is useful to know that the first value encountered that has a time value is assigned to animation-duration and the second to animation-delay. Naturally, including animation-name and animation-duration is mandatory, since they describe the fundamental properties of an animation sequence.

3. Using @keyframes and Animation Properties

Figure 18.6 shows an example of how animation properties are used with the ©keyframe at-rule and Figure 18.7 shows a snapshot of the result.

In the example, the div{} rule styles the content of the <div> element and specifies its animation properties. The padding property specifies the space between the element’s content and its border and the font size, text align, and color properties specify text size, its alignment inside the element’s box, and color, respectively. The animation- name property gives the animation a name (“zooming”), animation-duration specifies its duration, animation-delay says to wait 1 second after the animation is triggered before starting it, animation-fill-mode says to display, when animation completes, a combination of the styles for both first and last executed keyframes, and animation- iteration-count says to play the animation three times before stopping.

The @keyframes at-rule says to scale the content of the element to which “zooming” animation is applied to 0.1 at 0% keyframe, scale it to 1.0 and rotate it clockwise by 45% around z-axis at 50% keyframe, and scale it to 2.0 at 100% keyframe as well as rotate it back to the initial value of 0°, since the rotateZ() function is not specified at 100% keyframe. To make the element stay at 45°, a separate transform declaration is required to specify it. Refer to Chapter 11 for more about the transform property.

3.1. Applying Multiple Animations to an Element

More than one animation can be applied to the same element by simply specifying the animation name and properties for each and then defining the corresponding @keyframes at-rules. This is typically done using the shorthand animation property, as it allows all the properties for an animation to be specified in one go. Each animation name and its properties are essentially specified as a comma-separated list. Figure 18.8 shows an example in which a circle is being moved slowly to and fro while its color is slowly changed as if it is pulsating.

In the .ball{} rule in the example, the width and height properties specify the size of the <div> element, background-color specifies its background color, and border-radius makes it round. The animation property specifies two animation sequences. For the first, it specifies animation-name as move, animation- duration as 10 seconds, animation-timing-function as ease-in, animation-iteration-count as infinite, and animation-direction as alternate. For the second, it specifies animation-name as pulse, animation- duration as 1 second, animation-timing-function as linear, animation- iteration-count as infinite, and animation-direction as alternate.

The @keyframes move{} at-rule says to move the element to 0 0 (top- left corner of page) at 0% keyframe and to 600px 0 (600px horizontally right) at 100%. The @key- frames pulse {} at-rule says to make the element’s background color orange at 0% keyframe and red at 100%.

3.2. Animated CSS Lightbox Display

In Figures 14.47 to 14.50 in Chapter 14, how to display a CSS lightbox was introduced. As mentioned there, a common practice is to animate it, rather than simply make it appear, so that it slides in from outside the screen into position. Figures 18.9 and 18.10 show how this is done using the same codes from Chapter 14, but with the animation instructions added to the CSS code. Essentially, the animation: move 0.5s; declaration was added to the .box{} rule and the following new rule was also added:

@keyframes move {

0% { transform: translate(-500px, 0); }

100% { transform: translate(0px, 0); }

The animation property specifies the name of the animation as “move”, its duration as 0.50 seconds, and the default values of other properties, as listed in Table 18.2. The @keyframes move{} at-rule animates the box (i.e., the element of class=“box”). It says, at 0% keyframe, to position the box, from the position specified in the .box{} rule, -500px along x-axis (which is off screen to the left) and 0px along the y-axis, and then move it to the position specified for the 100% keyframe. It is worth noting that if the 100% { transform: translate(0px, 0); } rule is not specified, the animation will still work the same way, because the box’s final position is specified in the .box{} rule, anyway. Refer to Chapter 14 for the explanation of ow the rest of the code works.

4. CSS Transitions

Transitions in CSS define how a specified value of a property changes to another over time, including the timing of the change. By default, when change in a property is triggered, it happens instantly. With transition, the behavior of this change can be controlled. A change is triggered in various ways, such as by a page loading, using pseudo-classes (e.g., :hover and :active), and scripting. The properties used to create transition are transition-delay, transition-duration, transition-property, and transitiontiming-function. Table 18.3 lists their functions.

The shorthand transition property can be used to specify the properties in the table and for multiple property names. There is no strict order in which the properties must be specified, except that the value for the transition- duration property must come before and that of transition-delay. Typically, the transition- property value will be first. Figures 18.11 and 18.12 show an example in which multiple transitions are applied to an element.

The div{} rule in the example specifies the initial width, height, and background-color of the <div> element. The transition property specifies two transitions. For the first, it specifies transition-property as width, transition-duration as 0.5 seconds, and transition-timing-function as ease- out. For the second, it specifies transition-property as height, transition- duration as 0.5 seconds, and transition-timing-function as ease-out. Notice that the sets of transition values are comma separated. The div:hover{} rule specifies the width and height to transition into when the cursor hovers over the element. Also, the cursor property says to change the cursor shape to a pointer.