HTML and CSS Reference
In-Depth Information
<title>
CSS
Animations - animation-name
</title>
<style type="text/css">
@-webkit-keyframes move {
from {top: 0; left:0; opacity: 1;}
50% {top: 0; left:500px; opacity: .5;}
to {top: 500px; left: 500px; opacity: .1;}
}
@-webkit-keyframes resize {
from {height: 300px; width: 100px;}
50% {height: 100px; width: 100px;}
to {height: 100px; width: 300px;}
}
@-webkit-keyframes fade {
from {opacity: 1;}
50% {opacity: .5;}
to {opacity: .1;}
}
#anim1 {-webkit-animation-name: move, resize, fade;
-webkit-animation-duration: 10s;
position:absolute;
background-color: purple;}
</style>
</head>
<body>
<div id="anim1">
Watch me move and vanish!
</div>
</body>
</html>
O
NLINE
http://htmlref.com/ch6/animationname.html
Compatibility
CSS3 Proposed
Chrome 3+, Safari 3.1+
Notes
• WebKit supports this property as
-webkit-animation-name
.
• Firefox 3.7 pre-releases show support for CSS transitions which are very related to
CSS animation. It is quite likely that a form of this property using the
-moz
prefix
may be supported in a Firefox browser by the time you read this.
animation-timing-function
This property is used to describe how the animation will play.
Syntax
animation-timing-function:
timingfunction
[
,timingfunction2,...timingfunctionN
]
