快来看看：CSS3实现动画的三种方式

css动画就是元素从一种样式过渡到另一种样式的过程。常见的动画效果很多，比如，平移、旋转、缩放等，css实现动画的方式有以下几种：

1、transition：实现渐变动画

2、transform：实现转变动画

3、animation：实现自定义动画

一、实现渐变动画

1. 语法

 transition：property duration timing-function delay；

2.子属性介绍

transition-property：填写需要变化的css属性；

transition-duration：完成过渡效果需要的时间单位(s或者ms)；

transition-timing-function：指定过渡函数，规定效果的速度曲线；

transition-timing-function具体的值可以看下面的表格：

值	介绍
linear	匀速（等于 cubic-bezier(0,0,1,1)）
ease	从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	慢慢变快（等于 cubic-bezier(0.42,0,1,1)）
ease-out	慢慢变慢（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	先变快再到慢（等于 cubic-bezier(0.42,0,0.58,1)），渐显渐隐效果
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

transition-delay：动画效果的延迟触发时间(单位ms或者s)。

并不是所有属性都能过渡，比如display: none 到 display: block。

3.下面让我们看一个完整的例子

    html代码如下：

<div class="box"></div>

    css代码如下：

<style>        .box{            width: 200px;            height: 200px;            background: #6697ea;            transition-property: width,height,background-color,border-radius;            transition-duration: 2s;            transition-timing-function: ease-in;            transition-delay: 500ms;             /*简写*/            /*transition: all 2s ease-in 500ms;*/        }        .box:hover{            width: 300px;            height: 300px;            background: #cbb3d5;            border-radius: 50%;        }</style>

效果如下：

二、实现转变动画

transform属性应用于2D 或 3D转换。该属性允许我们能够对元素进行旋转、缩放、倾斜、移动这四类操作。

1. 旋转(rotate)：主要分为2D旋转和3D旋转。

1.1、2D旋转

transform:rotate(45deg); //顺时针旋转45度

1.2、3D旋转：围绕原地到(x,y,z)的直线进行3D旋转

 transform:rotate(x,y,z,angle);

• x,y,z：分别表示 X、Y 和 Z 轴方向，都不能省略；

• angle：设置对象设置对象的旋转角度，不能省略；

• rotateX(angle)，沿着X轴进行3D旋转；rotateY(angle)，沿着Y轴进行3D旋转；rotateZ(angle)，沿着Z轴进行3D旋转；

• 一个参数 “角度”，单位 deg 为度的意思，正数为顺时针旋转，负数为逆时针旋转。

2. 缩放(scale)：一般用于元素的大小收缩设定。主要分为2D缩放和3D缩放。

2.1 2D缩放​​​​​​​

transform:scale(0.5);transform:scale(0.5,2);

• 一个参数时：表示水平和垂直同时缩放该倍率。

• 两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率 。

2.2 3D缩放​​​​​​​

transform:scale3d(x,y,z);transform:scaleX(x);transform:scaleY(y);transform:scaleZ(z);

• x,y,z为缩放比例。

3. 倾斜(skew)：主要用于对元素的样式倾斜。​​​​​​​

transform:skew(30deg);transform:skew(30deg,30deg);

• 一个参数时：表示水平方向的倾斜角度。

• 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度 。

• skew 的默认原点 transform-origin 是这个物件的中心点。

4.移动(translate)：主要用于将元素移动。主要分为2D旋转和3D旋转。

4.1 2D移动​​​​​​​

transform:translate(45px);transform:translate(45px,150px);//沿着X轴和Y轴同时移动

• 一个参数时：表示水平方向的移动距离。

• 两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

4.2 3D移动​​​​​​​

transform:translateX(45px);//仅仅在X轴移动transform:translateY(45px);//仅仅在Y轴移动transform:translateZ(45px);//仅仅在Z轴移动transform:translate3d(x,y,z);//在X,Y,Z轴上都移动

• transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。

• x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度；z只能设置长度值。

5.基准点 transform-origin

• 在使用 transform 方法进行文字或图像的变形时，是以元素的中心点为基准点进行的 。使用 transform-origin 属性，可以改变变形的基准点 。

• 用法: transform-origin: 10px 10px;

• 表示相对左上角原点的距离，单位 px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；

• 两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为 left、center、right，第二个参数可以指定为 top、center、bottom。

6.一般配合transition过度使用。transform不支持inline元素，使用之前把它变为block。

  为方便演示，可以看如下效果：

三、实现自定义动画

为了实现更灵活的动画效果，css3还提供了自定义动画的功能，关键帧动画@keyframes通常搭配 animation 属性一起使用，首先学习怎么定义关键帧动画

1.@keyframes 规则 

• @keyframes 规则用于创建动画 。在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果 。

• 必须定义动画的名称和时长 。如果忽略时长, 则动画不会允许, 因为默认值是 0。

• 请用百分比来规定变化发生的时间, 或用关键词 “from” 和 “to”, 等同于 0% 和 100% 。

2.animation属性

• name：需要绑定到选择器的keyframe名称。

• duration：完成该动画需要花费的时间，秒或毫秒。

• timing-function：跟transition-linear一样。

• delay：设置动画在开始之前的延迟。

• iteration-count：设置动画执行的次数，infinite为无限次循环。

• direction：是否轮询反向播放动画。normal，默认值，动画应该正常播放；alternate，动画应该轮流反向播放。

3.下面让我们看一个完整的例子

html代码如下：​​​​​​​

<div class="head">  <div class="eyes-one"></div>  <div class="eyes-two"></div>  <div class="smile"></div></div>

css代码如下：​​​​​​​

.head {  -webkit-animation-name: up-down;           animation-name: up-down;  -webkit-animation-duration: 1s;          animation-duration: 1s;  -webkit-animation-timing-function: ease-in-out;          animation-timing-function: ease-in-out;  -webkit-animation-iteration-count: infinite;          animation-iteration-count: infinite;  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;  width: 50.2vmin;  height: 50.2vmin;  background: #ffffff;  overflow: hidden;  border-radius: 50%;  background: #4b96ca;}.head .eyes-one, .head .eyes-two {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;  width: 14.5vmin;  height: 14.5vmin;  background: white;  border-radius: 50%;  overflow: auto;  position: absolute;}.head .eyes-one {  -webkit-animation-name: bounce;          animation-name: bounce;  -webkit-animation-duration: 1.4s;          animation-duration: 1.4s;  -webkit-animation-timing-function: ease-in-out;          animation-timing-function: ease-in-out;  -webkit-animation-iteration-count: infinite;          animation-iteration-count: infinite;  top: -9.5vmin;  left: 2.5vmin;}.head .eyes-one:before {  content: "";  position: absolute;  width: 9.2vmin;  height: 9.2vmin;  background: #1f2033;  top: 1.8vmin;  left: 0.9vmin;  border-radius: 50%;}.head .eyes-two {  -webkit-animation-name: bounce;          animation-name: bounce;  -webkit-animation-duration: 1.4s;          animation-duration: 1.4s;  -webkit-animation-timing-function: ease-in-out;          animation-timing-function: ease-in-out;  -webkit-animation-iteration-count: infinite;          animation-iteration-count: infinite;  top: -9.5vmin;  left: -31.5vmin;}.head .eyes-two:before {  content: "";  position: absolute;  width: 9.2vmin;  height: 9.2vmin;  background: #1f2033;  top: 1.8vmin;  left: 3.9vmin;  border-radius: 50%;}.head .smile {  -webkit-animation-name: bounces;          animation-name: bounces;  -webkit-animation-duration: 1.4s;          animation-duration: 1.4s;  -webkit-animation-timing-function: ease-in-out;          animation-timing-function: ease-in-out;  -webkit-animation-iteration-count: infinite;          animation-iteration-count: infinite;  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;  width: 8vmin;  height: 2vmin;  background: none;  left: -13.5vmin;  top: 11.8vmin;  border-bottom: 1vmin solid black;  border-left: 1vmin solid black;  border-right: 1vmin solid black;  border-radius: 0 0 15vmin 15vmin;}@-webkit-keyframes up-down {  0% {top: 2vmin;}  25% {top:0vmin;}  50% {top: 2vmin;}  75% {top: 0vmin;}  100% {top: 2vmin;}}@keyframes up-down {  0% {top: 2vmin;}  25% {top:0vmin;}  50% {top: 2vmin;}  75% {top: 0vmin;}  100% {top: 2vmin;}}@-webkit-keyframes bounce {  0% {top: -2vmin;}  25% {top: -12vmin;}  50% {top: -2vmin;}  75% {top: -12vmin;}  100% {top: -2vmin;}}@keyframes bounce {  0% {top: -2vmin;}  25% {top: -12vmin;}  50% {top: -2vmin;}  75% {top: -12vmin;}  100% {top: -2vmin;}}@-webkit-keyframes bounces {  0% {top: 15vmin;}  25% {top: 5vmin;}  50% {top: 15vmin;}  75% {top: 5vmin;}  100% {top: 15vmin;}}@keyframes bounces {   0% {top: 15vmin;}  25% {top: 5vmin;}  50% {top: 15vmin;}  75% {top: 5vmin;}  100% {top: 15vmin;}}

效果如下：

总结

其实大家看完会发现，css3动画可以实现很多有趣的效果，有兴趣的同学可以试着去写写