CHAPTER 6

image

CSS3 Keyframe Animations for Web Content

As you saw in the previous chapter, the syntax of the CSS Animation module is more powerful than the Transitions syntax, allowing for far greater control of web content through the use of keyframes. This chapter will illustrate that power through several examples: a cycling slideshow, an image gallery that duplicates the appearance of the classic Lightbox plug-in for JavaScript, and a logo animation.

A Simple CSS3 Slideshow

Traditionally, image gallery slideshow effects were created using Flash or JavaScript, often in the form of a framework plug-in, such as Nivo Slider (http://nivo.dev7studios.com ...

Get Pro CSS3 Animation now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.