animation

这个属性是css3里的,具体的浏览器兼容性大家可以去Can I Use里面查看。

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state ; 

定义和用法

animation 属性是一个简写属性,用于设置六个动画属性:
animation-name       规定需要绑定到选择器的 keyframe 名称。
animation-duration   规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function   规定动画的速度曲线。
animation-delay       规定在动画开始之前的延迟。
animation-iteration-count   规定动画应该播放的次数。
animation-direction  规定是否应该轮流反向播放动画。
animation-fill-mode   规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。animation-play-state  指定动画是否正在运行或已暂停。
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

animation-timing-function

animation-duration、animation-timing-function、animation-delay和transition里面的transition-duration、transition-timing-function、transition-delay功能一样就不再多说了。
但是animation-timing-function属性里animation比transition多一个steps取值,steps函数可以实现分步过渡。steps 函数指定了一个阶跃函数,第一个参数指定了时间函数中的间隔数量(必须是正整数);第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。
这里写图片描述
这里有一个例子,可以看到steps函数的用处:steps.html
还可以参考:steps()用法详解

animation-name

animation-name属性是指keyframes关键字定义的名称。比如:

div:hover {
  animation: 1s rainbow;
}

当鼠标悬停在div元素上时,会产生名为rainbow的动画效果,持续时间为1秒。然后我们定义rainbow效果:

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

rainbow效果一共有三个状态,分别为起始(0%)、中点(50%)和结束(100%)。如果有需要,还可以插入更多状态。参考实例:animation.html

keyframes

keyframes关键字写法还可以这样写:

@keyframes rainbow {
  from { background: #c00 }
  50% { background: orange }
  to { background: yellowgreen }
}

from代表0%,to代表100%。还可以省略某个状态,浏览器会自动推算中间状态:

@keyframes rainbow {
  50% { background: orange }
  to { background: yellowgreen }
}

@keyframes rainbow {
  to { background: yellowgreen }
}

甚至,可以把多个状态写在一行:

@keyframes pound {
  from,to { transform: none; }
  50% { transform: scale(1.2); }
}

animation-iteration-count

默认情况下,动画只播放一次。加入infinite关键字,可以让动画无限次播放。

div:hover {  
    animation: 1s rainbow infinite;
}

也可以指定动画具体播放的次数:

div:hover {
    animation: 1s rainbow 3;
}

这里还有一个心脏跳动的例子。

animation-direction

动画循环播放时,每次都是从结束状态跳回到起始状态,再开始播放。animation-direction属性,可以改变这种行为。默认情况是,animation-direction等于normal:

    div:hover {
      animation: 1s rainbow 3 normal;
    }

animation-direction可以取以下值:
这里写图片描述

animation-fill-mode

动画结束以后,会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态,可以使用animation-fill-mode属性。注意这个属性可以不用在动画的循环播放中,而animation-direction属性一般用在动画的循环播放中:

div:hover {
  animation: 1s rainbow forwards;
}

animation-fill-mode可以使用下列值:

  1. none:默认值,回到动画没开始时的状态。
  2. forwards: 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
  3. backwards:让动画回到第一帧的状态。
  4. both: 根据animation-direction轮流应用forwards和backwards规则。

animation

transition一样,animation也是一个简写形式。各个属性的顺序也可以更改,但是animation-duration和animation-delay这两个属性之间的顺序必须是一前一后。

div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}

animation-play-state

规定动画正在运行还是暂停。有时,动画播放过程中,会突然停止。这时,默认行为是跳回到动画的开始状态。如果想让动画保持突然终止时的状态,就要使用animation-play-state属性。它有两个取值paused(停止)、running(运行)。
参考实例:animation1.html

总结

目前,IE 10和Firefox(>= 16)支持没有前缀的animation,而chrome不支持,所以必须使用webkit前缀:

div:hover {
  -webkit-animation: 1s rainbow;
  animation: 1s rainbow;  
}

@-webkit-keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

没有更多推荐了,返回首页