css3动画之@keyframes关键帧
1、@keyframes的基本语法：
@keyframes animationname {keyframes-selector {css-styles;}}
其中：
animationname：动画名称
keyframes-selector：动画时长的百分比
css-styles： CSS 样式属性
例子：
css部分：
.div1{
position: relative;
width:100px;
height:100px;
background: darkslategray
animation:myfirst 5s infinite;
-webkit-animation:myfirst 5s infinite;
-moz-animation:myfirst 5s infinite;
-o-animation:myfirst 5s infinite;
}
@keyframes myfirst{
0%{left:0px;}
100%{left:300px;}
}
html部分：
<div class="div1">keyframes动画示例</div>
效果如图：
2、在一个动画中改变多个 CSS 样式
例子：
css部分：
.div1{
position: relative;
width:100px;
height:100px;
color:#fff;
background: darkslategray;
animation:myfirst 5s infinite;
-webkit-animation:myfirst 5s infinite;
-moz-animation:myfirst 5s infinite;
-o-animation:myfirst 5s infinite;
}
@keyframes myfirst{
0%{
left:0px;
top: 0px;
}
100%{
left:300px;
top:400px;
}
}
html部分：
<div class="div1">keyframes动画示例</div>
效果如图：
3、带有多个 CSS 样式的多个 keyframe 选择器
例子：
css部分：
.div1{
position: relative;
width:200px;
height:200px;
color:#fff;
background: darkslategray;
animation:myfirst 5s infinite;
-webkit-animation:myfirst 5s infinite;
-moz-animation:myfirst 5s infinite;
-o-animation:myfirst 5s infinite;
}
@keyframes myfirst{
0%{
left:0px;
top: 0px;
background: darkslategray;
}
25%{
left:100px;
top:150px;
background: rosybrown;
}
50%{
left: 150px;
top:300px;
background: red;
}
75%{
left:300px;
top:400px;
background: goldenrod;
}
100%{
left:0px;
top:0px;
background:darkorchid;
}
}
html部分：
<div class="div1">keyframes动画示例多个 CSS 样式的多个 keyframe 选择器</div>
效果如图：
4、keyframe兼容性代码具体如下：
@keyframes myfirst
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes myfirst/* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
@-o-keyframes myfirst /* Opera */
{
from {top:0px;}
to {top:200px;}
}
