淘先锋技术网

首页 1 2 3 4 5 6 7

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);}
}