Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Using Animations

CSS animations are essentially enhanced transitions. You have more options, more control, and more flexibility in how you move from one CSS style to another. Table 23-3 describes the animation properties.

Image

Image

The format for the animation shorthand property is as follows:

animation: <animation-name> <animation-duration> <animation-timing-function>
    <animation-delay> <animation-iteration-count>

Notice that none of these properties allow you to specify the CSS properties that will be animated. This is because animations are defined in two parts. The first part is contained within the style declaration and uses the properties shown in Table 23-3. This defines the style of the animation, but not what is to be animated. The second part is created with the @key-frames rule, and is used to define the set of properties that the animation will apply to. You can see both parts of the animation in Listing 23-5.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint