animation-name
CSS animation-name Property
The CSS animation-name property specifies which animations get applied to specific elements. An element can have one or more animations applied to it simultaneously, which allows you to animate CSS properties at separate speeds and cycles. The other CSS animation properties can have corresponding comma separated values designated to affect specific animations in your comma separated animation name list.
Possible Values
animation-name: animation | animation, animation, animation
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-name (Chrome and Safari)
- -moz-animation-name (Firefox)
- -ms-animation-name (Internet Explorer)
- -o-animation-name (Opera)
- animation-name (Standard)
<!DOCTYPE html>
<html>
<style type="text/css">
div#box1 {
-webkit-animation-name: box-move;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
background:#D3F7FE;
border:#000 1px solid;
width:100px;
height:100px;
position:relative;
left: 0px;
top: 0px;
}
@-webkit-keyframes box-move {
from { left: 0px; }
to { left: 25%; }
}
</style>
<body>
<div id="box1">BOX 1</div>
</body>
</html>
Apply multiple keyframe animations to an element to have separate cycles and speeds:
<!DOCTYPE html>
<html>
<style type="text/css">
div#box1 {
-webkit-animation-name: box-move, box-color;
-webkit-animation-duration: 5s, 2s;
-webkit-animation-iteration-count: infinite, 3;
-webkit-animation-fill-mode: forwards;
background:#D3F7FE;
border:#000 1px solid;
width:100px;
height:100px;
position:relative;
left: 0px;
top: 0px;
}
@-webkit-keyframes box-move {
50% { left: 25%; }
100% { left: 0px; }
}
@-webkit-keyframes box-color {
25% { background: #FF0; }
50% { background: #F0F; }
75% { background: #0C0; }
100% { background: #D3F7FE; }
}
</style>
<body>
<div id="box1">BOX 1</div>
</body>
</html>
0 Response to "animation-name"
Post a Comment