CSS3动画功能

CSS3中的动画功能分为Transitions功能与Animations功能，这两种功能都可以通过改变CSS中的属性值来产生动画效果。
Transitions功能支持从一个属性值平滑过渡到另一个属性值，Animations功能支持通过关键帧的指定来在页面上产生更复杂的动画效果。

Transitions功能

Transitions功能的使用方法

Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能，可通过transitions属性来使用Transitions功能。

// transition属性的使用方法
transition:property duration timing-function

其中property表示对哪个属性进行平滑过渡，duration表示在多长时间内完成属性值的平滑过渡， timing-function表示通过什么方法来进行平滑过渡。

<style type="text/css">
div{
  background-color: #ffff00;
  transition: background-color 1s linear;
  -webkit-transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
  -o-transition: background-color 1s linear;
}
div:hover{
  background-color: #00ffff;
}
</style>
<div>示例文字</div>

上面的代码当鼠标指针移动到div元素上时，在1秒内div元素的背景色会从黄色平滑过渡到浅蓝色。
在CSS3中，还有另外一种使用Transitions功能的方法，就是将transitions属性中的三个参数改写成transitíon-property属性、transition-duratíon属性、transition-timing-function属性，这三个属性的含义及属性值的指定方法与transitíons属性中的三个参数的含义及指定方法完全相同。

-webkit-transition-property:background-color;
-webkit-transition-duration:1s;
-webkit-transition-timing-tunction:linear;
-moz-transition-property:background-color;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-o-transition-property:background-color;
-o-transition-duration:18;
-o-transition-timing-function:linear;

使用Transitions功能同时平滑过渡多个属性值

可以使用Transitions功能同时对多个属性值进行平滑过渡。

<style type="text/css">
div{
  background-color: #ffff00;
  color: #000000;
  width: 300px;
  transition:  background-color 1s linear, color 1s linear, width 1s linear;
  -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
  -moz-transition:  background-color 1s linear, color 1s linear, width 1s linear;
  -o-transition:  background-color 1s linear, color 1s linear, width 1s linear;
}
div:hover{
  background-color: #003366;
  color: #ffffff;
  width: 400px;
}
</style>
<div>示例文字</div>

上面的代码当鼠标指针放到div元素上时，在1秒内完成了div元素的背景色、字体色和宽度这三个属性值的平滑过渡。
另外，可以通过改变元素的位置属性值、实现变形处理的transform属性值来让元素实现移动、旋转等动画效果。

<style type="text/css">
img{
  position: absolute;
  top: 70px;
  left: 0;
  transform: rotate(0deg);
  transition: left 1s linear, -o-transform 1s linear;
  -webkit-transform: rotate(0deg);
  -webkit-transition: left 1s linear, -webkit-transform 1s linear;
  -moz-transform: rotate(0deg);
  -moz-transition: left 1s linear, -moz-transform 1s linear;
  -o-transform: rotate(0deg);
  -o-transition: left 1s linear, -o-transform 1s linear;
}
div:hover img{
  position: absolute;
  left: 30px;
  transform: rotate(720deg);
  -webkit-transform: rotate(720deg);
  -moz-transform: rotate(720deg);
  -o-transform: rotate(720deg);
}
</style>
<div>
  <img src="flower.png" />
</div>

上面的示例中有一个div元素，div元素中有一张图片，当鼠标指针停留在图像上时，图像会向右移动30px，并且顺时针旋转720度。

Animations功能

Animations功能的使用方法

Animations功能与Transitions功能相同， 都是通过改变元素的属性值来实现动画效果的。区别在于：使用Transitions功能时只能通过指定属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果，而Animations则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

<style type="text/css">
div{
  background-color: red;
}
@-webkit-keyframes mycolor{
  0%{
    background-color: red;
  }
  40%{
    background-color: darkblue;
  }
  70%{
    background-color: yellow;
  }
  100%{
    background-color: red;
  }
}
@keyframes mycolor{
  0%{
    background-color: red;
  }
  40%{
    background-color: darkblue;
  }
  70%{
    background-color: yellow;
  }
  100%{
    background-color: red;
  }
}
div:hover{
  animation-name:mycolor;
  animation-duration:5s;
  animation-timing-function:linear;
  -webkit-animation-name:mycolor;
  -webkit-animation-duration:5s;
  -webkit-animation-timing-function:linear;
}
</style>
<div>示例文字</div>

使用Animations功能的时候，如果使用的是Safari或Chrome浏览器，会使用如下所示的方法来创建关键帧的集合。

@-webkit-keyframes 关键帧集合名{ 创建关键帧的代码 }

关键帧的集合创建好之后， 在元素的样式中使用该关键帧的集合。

div:hover{
    animation-name:mycolor;
    animation-duration:5s;
    animation-timing-function:linear;
    -webkit-animation-name:mycolor;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
}

在animation-name属性中指定关键帧集合的名称；在animation-duratiion属性中指定完成整个动画所花费的时间；在animation-timing-function属性中指定实现动画的方法。

实现多个属性值同时改变的动画

如呆要想实现让多个属性值同时变化的动画， 只需在各关键帧中同时指定这些属性值就可以了。

<style type="text/css">
div{
  position: absolute;
  background-color: yellow;
  top:100px;
  width:500px;
}
@-webkit-keyframes mycolor{
  0%{
    background-color: red;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  40%{
    background-color: darkblue;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
  }
  70%{
    background-color: yellow;
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
  }
  100%{
    background-color: red;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
}
@keyframes mycolor{
  0%{
    background-color: red;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  40%{
    background-color: darkblue;
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
  }
  70%{
    background-color: yellow;
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
  }
  100%{
    background-color: red;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
}
div:hover{
  animation-name: mycolor;
  animation-duration: 5s;
  animation-timing-function: linear;
  -webkit-animation-name: mycolor;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
}
</style>
<div>示例文字</div>

animation的属性

属性 描述 描述
animation 所有动画属性的简写属性
animation-name 指定要绑定到选择器的关键帧的名称 none
animation-duration 规定动画完成一个周期所花费的秒或毫秒 默认0
animation-timing-function 指定动画将如何完成一个周期 默认"ease"
animation-delay 定义动画开始前等待的时间 可选，默认0，以秒或毫秒计
animation-iteration-count 定义动画应该播放多少次 infinite：指定动画播放无限次
默认1
animation-direction 规定动画是否在下一周期逆向地播放 normal：默认值，动画按正常播放
reverse：动画反向播放
alternate：动画在奇数次正向播放，在偶数次反向播放
alternate-reverse：动画在奇数次反向播放，在偶数次正向播放
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 默认值none
animation-play-state 指定动画是否正在运行或已暂停 paused：指定暂停动画
running：默认值，指定正在运行的动画

animation简写形式：

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

animation-fill-mode的取值

值 描述
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素
forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值
backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）
both 动画遵循forwards和backwards的规则。也就是说，动画会在两个方向上扩展动画属性

实现动画的方法

方法 属性值的变化速度
linear 在动画开始时到结束时以同样速度进行改变
ease-in 动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out 动画开始时速度很快，然后速度沿曲线值进行放慢
ease 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值放慢
ease-in-out 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值放慢
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容