Chapter 6 ■ CSS3 Keyframe animationS for Web Content
h1 span {
font-family: "Univers CE 45 Light"; font-size: 25px; display: block;
letter-spacing: 20px; text-indent: 30px;
}
Finally, you can create the animation (Listing 6-31).Listing 6-31. Keyframe Sequence for Corporate Logo Animation
@keyframes spinner {
0% {
transform: translate(800px,-25px) rotate(378deg); opacity: 0; }
100% { transform: translate(2px,-25px) rotate(−56deg); opacity: 1; }
}
div#container {
position: relative; width: 200px; height: 200px;
animation-name: spin;
animation-duration: 2s;
transform: rotate(−18deg);
animation: spinner 1.5s 2s linear both;
}
Note that you’re not attaching the animation to any particular state, so the keyframe animation will run
automatically on page load.
Summary
In this chapter you’ve explored uses of CSS3 Keyframes to create animations for image galleries and other page
content. Keyframe sequences can include any form of complex motion that needs to be called at any time: on
mouse click, page load, or another form of user interaction.
One issue that I have not addressed in animation so far is display scalability: the larger the elements in your
sequences become, the harder the browser and GPU will have to work to transform, transition, and animate
them. In addition, bitmap images are a big part of the total page size, slowing down connection speeds, especially
on mobile devices. Neither do images respond well to scaling: doubling the DPI of the screen that your bitmap-
based work is displayed on will result in image degradation.
In the next chapter, you’ll look at a potential answer to all of these issues, in the form of SVG vector graphics
integrated with CSS3.