原副标题：快来看一看：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具体内容的值能看上面的表单：
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动画电影能同时实现许多有趣的效用，有兴趣的同学能试着去写写
责任编辑：
