本篇讲解CSS的动画如何实现。

animation

animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
div{
  animation: name duration timing-function delay iteration-count direction;
}
animation 值作用
animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function 规定动画的速度曲线
animation-delay 规定在动画开始之前的延迟时间
animation-iteration-count 规定动画应该播放的次数,infinite表示无限循环
animation-direction 规定是否应该轮流反向播放动画
animation-duration 必须指定。如果不指定，动画不会发生，因为默认值是0s（0秒）

animation-name

为 @keyframes 动画规定一个名称。

@keyframes

规定动画的细节怎执行。

从A状态改变到B状态中间的细节。

使用from to改变单个动画样式：

试一试

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

使用百分比改变多个动画样式：

试一试

/* 动画代码 */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* 应用动画的元素 */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

animation-timing-function

规定动画的速度曲线。

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

试一试

animation-direction 值作用
ease 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear 规定从开始到结束的速度相同的动画
ease-in 规定慢速开始的动画
ease-out 规定慢速结束的动画
ease-in-out 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) 运行您在三次贝塞尔函数中定义自己的值

animation-direction

规定动画播放方向。

指定是向前播放、向后播放还是交替播放动画。

试一试

animation-direction 值作用
normal动画正常播放（向前）。默认值
reverse 动画以反方向播放（向后）
alternate 动画先向前播放，然后向后
alternate-reverse 动画先向后播放，然后向前

animation-fill-mode

指定动画的填充模式。

比如：停留在最后一帧。

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

animation-fill-mode 值作用
none 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

例：保留最后一个关键帧样式

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

试一试

animation-play-state

规定动画正在运行还是暂停。

试一试

animation-fill-mode 值作用
paused 动画暂停
running 动画继续播放

动画简写

下面两个动画效果相同：

div {
  animation: example 5s linear 2s infinite alternate;
}
div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

练习

试一试

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>

<div></div>

</body>
</html>