Animation for the web allows designers to add smooth and professional-looking motion graphics to webpages without increasing file sizes or slowing load times. A vast number of animated effects can be achieved using nothing more than CSS and some simple keyframing. We can change the size, shape or colour of one or more elements on the page. We can cause one or more elements on the page to appear, disappear, move, or fully change position. Or we can apply some combination of all of these things to one or more elements on the page at the same time. Below are some examples of how animation properties and the @keyframe rule can be applied to different kinds of elements and in different contexts.
Examples of Animatable Properties in CSS
No matter the selected element, the basic procedure for creating an animated sequence is the same. The animation must first be given a name and a duration, then its speed and the number of repetitions it is to make can be defined or left at default values. The animation name is then applied to the @keyframes tag, within which specific element values are defined for precise points over the animation's full length (defined either as percentages of time elapsed or with a "from/to" syntax representing beginning and end points). The end result is a smoothly rendered transition or transformation between element values over the specified time period.
A large number of elements can be animated in CSS. (For a comprehensive list, see here). Examples include various background, border and font properties; properties associated with column, grid and flexbox layouts; and positioning and transformation properties. Some simultaneous animations of a number of these properties are demonstrated in the three examples below.
Example One
background-color; font-size; font-family; letter-spacing; border-right & border-bottom-color
Example Two
color; position: left & top; border-top-left & bottom-right-radius
Example Three
flex-grow, box-shadow; text-shadow
Using SVGs
Simple transitions and transformation effects can easily be applied to SVGs using standard animation properties and the @keyframes rule.
The skull at right is set to rotate around its centre point using transform-origin: center and keyframes to define a starting point of 0 degrees and an end point of 360 degrees. Constant rotation is applied with an animation-iteration-count of infinite.
More complex SVG animation is also possible by identifying specific path values within an SVG that can be changed at different keyframes, resulting in a shape changing effect manipulated by animation duration and delay. This method of animating SVGs (on Chrome and Opera only) involves targeting a path in CSS using the d property, which holds the numerical value for a shape.
To achieve the effect on the left, the skull SVG was imported into Adobe Illustrator and individual points along the path were moved using the direct selection tool to change the overall shape of the element. The SVG was then re-exported from Illustrator as HTML code, and resultant path values were applied to d at the final @keyframe.
Assigning class names to individual paths within a larger image composed of SVG elements makes it possible to manipulate each element separately and build more complex animation sequences composed of multiple individual animation events with relative durations and delays.
To make the animated sequence at right (inspired by the one found here), text and image were first laid out in Adobe Illustrator, with fonts converted to outlines. The full image was then exported from Illustrator as an SVG. Once copied into the HTML, transition effects were applied to individual class names assigned to each path using @keyframes. This image cycles through a change in scale from 1.0 to 1.1 on each of the paths representing a letter at staggered 0.1 second intervals. Setting the animation-direction to alternate gives the in-and-out "pop" effect as the letters grow and shrink. To achieve the skull "peekaboo," it is moved along the y-axis from a position just below the viewbox where it cannot be seen, to a position just underneath the letter paths where it is fully visible, then back to its initial position again.
Using the 'clip-path' Property
The CSS clip-path propery, which essentially creates a clipping mask that hides certain parts of a container or graphic element, has a number of potential applications for CSS animation. The clipping path can be made from a linked or inline SVG, from text, or from one of a number of basic shapes native to CSS such as "square," "circle" or "polygon." Since it defines an area where everything on the inside is visible while everything on the outside is hidden, we can use clip-path with animation to create, for example, different types of show-hide effects or color and content transitions.
The first of the examples below (at left) shows a triangular (polygonal) clip-path applied over a square div containing some text. The text becomes visible in the animation cycle every time that the clip-path shape moves over the area of the div where it is located. The second example (centre), inspired by a Mozilla clip-path tutorial available here, demonstrates how SVGs can also be used to define clip-path values. The star-shaped SVG path masks a coloured circle growing and shrinking between a radius of 0 and a radius of 20px. While the effect makes it appear as though the star is being flooded with colour, as the Mozilla tutorial explains, it is conceptually helpful to think of the clipping path as a custom-shaped viewport through which the circle animation event is viewable. (The first example, on the other hand, is perhaps more usefully considered as a moving viewport on static content).
The final example (far-right), demonstrates a possible show-hide/transition between two background images using an inset clip-path. The first image is placed in an outer, containing div, and the second image with the clip-path animation applied is nested inside in a second div. When the clipping mask completely covers the background image of the inner div, the background image of the outer div becomes visible.
Hello
Using Transitions
The CSS transition property also allows for a smooth change over a specified duration between start and end values assigned to a certain element or attribute. However, the difference between this and the animation property is that we can use transition to animate elements on demand by pure CSS alone. The changed values may be defined by programmatically adding and removing classes to toggle between values using JavaScript, but they can also be coded in a pseudo-class such as :hover or :active, and triggered on the page by a mouse-over or click.
Examples below show 1. ) an increase in the width of the div; 2. ) a change in the border-radius of the div from 0 to 50%; 3. ) a change in the background-color of the div; 4. ) a 360 degree rotation of the div on the x-axis; 5. ) a 360 degree rotation of the div on the y-axis; 6. ) a 360 degree rotation of the div on the z-axis; 7. ) a simultaneous decrease in the height and width of the div; 8. ) a change in background-color and increase in height and width of the div both occuring at different rates; 9. ) a change in border-radius from 0 to 50%, 360 degree rotation on the z-axis and decrease in height and width of the div all occurring at different rates.
Hover over squares to activate transitions:
1
2
3
4
5
6
7
8
9