animation

animation
CSS animation Property
The CSS animation property is shorthand for establishing multiple animation properties in the same line. Each property is space separated. If you wish to apply settings for multiple animations you can separate each set of properties by commas, as shown in the example below.

Possible Values
animation: name timing-function iteration-count direction fill-mode play-state

NOTE: We must use browser specific prefixes until this property is standardized. Once this property is working in all browser software without prefixes, we can remove all of the prefixes. Use all four of the following prefixes, then add the standard property last. This assures it will work in most browsing environments even after this property is a standard.
-webkit-animation (Chrome and Safari)
-moz-animation (Firefox)
-ms-animation (Internet Explorer)
-o-animation (Opera)
animation (Standard)

Shorthand multiple animations in one line:

<!DOCTYPE html>
<html>
<style type="text/css">
div#box1 {
    -webkit-animation: box-move ease-in-out 3s infinite, box-color linear 2s infinite;
    background:#D3F7FE;
    border:#000 1px solid;
    width:100px;
    height:100px;
    position:relative;
    left: 0px;
    top: 0px;
}
@-webkit-keyframes box-move {
    50% { top: 200px; left: 200px;  }
    100% { top: 0px; left: 0px; }
}
@-webkit-keyframes box-color {
    25% { background: #F0F; }
    50% { background: #FF0; }
    75% { background: #63C; }
    100% { background: #D3F7FE; }
}
</style>
<body>
<div id="box1">BOX 1</div>
</body>
</html>
click here to code.
animation

0 Response to "animation"

Post a Comment
