Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Adding Animation to Elements on a Page

Problem

You want to animate an element within a web page, as shown with the cloud image in Figure 13-10.

Clouds moving in the background

Figure 13-10. Clouds moving in the background

Solution

Using Safari’s proprietary animation properties, set an element to move back and forth.

First add an HTML element after the opening body element:

<body>
 <div id="clouds1"></div>
 [...]
</body>

Insert a background image along with width, height, and absolute positioning to style the element:

#clouds1 {
 width: 627px;
 height: 410px;
 position: absolute;
 right: −300px;
 top: 0;
 background-image: url(clouds.png);
}

Next, set the keyframes for the animation, giving them the names of clouds:

@-webkit-keyframes "clouds" {
 from {
  right: 0px;
 }
 to {
  right: 100px;
 }
}

Start the animation by associating the keyframes to the “clouds1” div element along with instructions on how long the animation should last, how often it repeats, and the direction of the movement:

#clouds1 {
 width: 627px;
 height: 410px;
 position: absolute;
 right: −300px;
 top: 0;
 background-image: url(clouds.png);
 -webkit-transform: translate(300px, 0px);
 -webkit-animation-name: "clouds";
 -webkit-animation-duration: 10s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
}

Discussion

Although CSS-enabled animation is supported only in Safari as of this writing, the W3C is currently working on the specification. Other browser ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required