css旋转动画定义中心,css动画(transition/transform/animation)

在开发中，一个好的用户操作界面，总会夹杂着一些动画。css用对少的代码，来给用户最佳的体验感，下面我总结了一些css动画属性的使用方法及用例代码供大家参考，在不对的地方，希望大佬直接拍砖评论。

1 transition(过渡)

使用语法:

transition: property duration timing-function delay;

参数：

(1) property(设置过渡效果的css属性名称)：none | all | property。none表示没有属性获得过渡效果；all表示所有属性都将获得过渡效果；property表示css属性列表，多个属性用逗号( , )隔开。

(2) duration(设置完成过渡效果的时间)：秒或毫秒(s/ms)。

(3) 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)，在该函数定义自己的值，数值为0-1之间。

(4) delay(过渡效果何时开始)：值多少秒后执行过渡效果，如 2s ，表示2s后执行。

2 transform

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

使用语法：

transform: none|transform-functions;

参数：

(1) none：定义不进行任何转换，一般用于注册掉该转换。

(2) transform-functions：定义要进行转换的类型函数。主要有：

旋转(rotate)：主要分为2D旋转和3D旋转。rotate(angle)，2D 旋转，参数为角度，如45deg；rotate(x,y,z,angle)，3D旋转，围绕原地到(x,y,z)的直线进行3D旋转；rotateX(angle)，沿着X轴进行3D旋转；rotateY(angle)；rotateZ(angle)；

缩放(scale)：一般用于元素的大小收缩设定。主要类型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z为收缩比例。

倾斜(skew)：主要用于对元素的样式倾斜。skew(x-angle, y-angle)，沿着x和y轴的2D倾斜转换；skewX(angle)，沿着x轴的2D倾斜转换；skew(angle)，沿着y轴的2D倾斜转换。

移动(translate)：主要用于将元素移动。translate(x, y)，定义向x和y轴移动的像素点；translate(x, y, z)，定义像x、y、z轴移动的像素点；translateX(x)；translateY(y)；translateZ(z)。

3 animation

该属性主要用于设置动画属性。

使用语法：

animation: name duration timing-function delay iteration-count direction;

参数：

(1) name：需要绑定到选择器的keyframe名称。

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

(3) 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)，在该函数定义自己的值，数值为0-1之间。

(4) delay：设置动画在开始之前的延迟。

(5) iteration-count：设置动画执行的次数。

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

下面展示了这些元素的测试代码：

transition/transform

#div1{float:left;height:100px;width:100px;background-color:red;

}#div2{float:left;height:100px;width:100px;background-color:green;

}#div3{float:left;height:100px;width:100px;background-color:blue;

}#div4{float:left;height:100px;width:100px;background-color:#234F21;

}#div5{float:left;height:100px;width:100px;background-color:#af123c;

}#div6{float:left;height:100px;width:100px;background-color:#affa3c;

}

/*transition 实现多个属性*/#div1:active{width:200px;height:200px;transition:width 2s ease,height 2s ease;-moz-transition:width 2s ease,height 2s ease; /*Firefox 4*/-webkit-transition:width 2s ease,height 2s ease; /*Safari 和 Chrome*/-o-transition:width 2s ease,height 2s ease; /*Opera*/

}

/*transform 旋转 rotate*/#div2:hover{transform:rotate(35deg);-ms-transform:rotate(35deg); /*IE 9*/-moz-transform:rotate(35deg); /*Firefox*/-webkit-transform:rotate(35deg); /*Safari 和 Chrome*/-o-transform:rotate(35deg); /*Opera*/

}

/*transform 缩放 scale*/#div3:hover{transform:scale(0.8, 1.5);-ms-transform:scale(0.8, 1.5); /*IE 9*/-moz-transform:scale(0.8, 1.5); /*Firefox*/-webkit-transform:scale(0.8, 1.5); /*Safari 和 Chrome*/-o-transform:scale(0.8, 1.5); /*Opera*/

}

/*transform 倾斜 skew*/#div4:hover{transform:skew(35deg);-ms-transform:skew(35deg); /*IE 9*/-moz-transform:skew(35deg); /*Firefox*/-webkit-transform:skew(35deg); /*Safari 和 Chrome*/-o-transform:skew(35deg); /*Opera*/

}

/*transform 移动 translate*/#div5:hover{transform:translate(45px, 45px);-ms-transform:translate(45px, 45px); /*IE 9*/-moz-transform:translate(45px, 45px); /*Firefox*/-webkit-transform:translate(45px, 45px); /*Safari 和 Chrome*/-o-transform:translate(45px, 45px); /*Opera*/

}

/*transform 多个效果*/#div6:hover{transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);-ms-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); /*IE 9*/-moz-transform:rotate(35deg) scale(0.8,rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px)translate(45px, 45px); /*Safari 和 Chrome*/-o-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); /*Opera*/

}

transition