css中经常使用的动画属性是animation,可以定制一些需要的动画属性:
div
{
animation:mymove 5s infinite(无限播放动画);
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
animation属性有六个动画属性: - animation-name //keyframe动画名称
- animation-duration //完成动画所需要的时间(秒或毫秒)
- animation-timing-function // 规定动画的速度曲线
- animation-delay //规定在动画开始之前的延迟
- animation-iteration-count //规定动画播放的次数
- animation-direction //规定是否应该轮流反向播放动画
.class{
animation: name duration timing-function delay iteration-count direction;
}
example: .loading{
animation: round 2s infinite;
-webkit-animation: round 2s infinite;
}
<pre name="code" class="css">@keyframes round {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-webkit-keyframes round {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}