Game Development Reference
In-Depth Information
}
}
#sky {
-webkit-animation-name: myAnimation;
/* This is how you link a keyframe sequence
to an element */
-webkit-animation-duration: 3s;
/* Can be a value in seconds (s) or
milliseconds (m) */
-webkit-animation-timing-function: ease-out;
/* Can be linear, ease, ease-in, or ease-out
*/
-webkit-animation-iteration-count: 23;
/* Can be any non-negative integer or
"infinite" */
-webkit-animation-direction: alternate;
/* Default is "normal" */
-webkit-animation-play-state: running;
/* Can also be "paused" */
}
The text shadow
The text shadow interface is much simpler to use than the transition or animation
APIs since it only has four basic parameters, but can be equally as powerful in
adding beautiful visual elements to make the user experience great. The parameters
are the horizontal and vertical offset of the shadow relative to where the text is, the
amount of blur to apply to the shadow, and finally, the color of the shadow, which can
have the optional alpha channel for added opacity.
h1 {
text-shadow: -5px 5px 0 #000;
}
Multiply shadows may be added to the same element by adding them in a comma-
separated listed:
