HTML and CSS Reference
In-Depth Information
Compatibility
No specification
IE 5.5+
Notes
• Under Internet Explorer 8 this property should be represented as
-ms-
accelerator
.
• At the time of this writing, this was not working in IE 8 unless in compatibility
mode, despite documentation statements to the contrary.
animation
This shorthand property is used to set all of the animation properties at once.
Syntax
animation: animation-name animation-duration animation-timing-function
animation-delay animation-iteration-count animation-direction
where each value is defined by its named property. Like other shorthand properties, values
may be omitted. There may be other shorthand animation rules that follow the first,
separated by commas.
Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
CSS Animations
</title>
<style type="text/css">
@-webkit-keyframes move {
from {left: 0; top: 0;}
50% {left: 500px; top: 0;}
to {left: 500px; top: 500px;}
}
#anim1 {-webkit-animation:move 5s ease-out 0 infinite alternate;
position:absolute;
height: 100px; width: 100px;
background-color: purple;}
</style>
</head>
<body>
<div id="anim1">
Watch me move!
</div>
</body>
</html>
O
NLINE
http://htmlref.com/ch6/animation.html
