css动画属性使用及实例代码(transition/transform/ani
在开发中，一个好的用户操作界面，总会夹杂着一些动画。css用对少的代码，来给用户最佳的体验感，狼蚁网站SEO优化我了一些css动画属性的使用方法及用例代码供大家参考，在不对的地方，希望大佬直接拍砖评论。
1 transition(过渡)
使用语法:
transition: property duration timg-function delay;
参数
(1) property(设置过渡效果的css属性名称)none | all | property。none表示没有属性获得过渡效果；all表示所有属性都将获得过渡效果；property表示css属性列表，多个属性用逗号( , )隔开。
(2) duration(设置完成过渡效果的时间)秒或毫秒(s/ms)。
(3) timg-function(设置效果速度的速度曲线)lear，规定以相同速度开始到结束，等价于cubic-bezier(0,0,1,1)；ease，慢速开始，然后慢速结束，等价于cubic-bezier(0.25,0.1,0.25,1)；ease-，以慢速开始，等价于cubic-bezier(0.42,0,1,1)；ease-out，以慢速结束，等价于cubic-bezier(0,0,0.58,1)；ease--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 timg-function delay iteration-count direction;
参数
(1) name需要绑定到选择器的keyframe名称。
(2) duration完成该动画需要花费的时间，秒或毫秒。
(3) timg-function动画的运动速度曲线。lear，规定以相同速度开始到结束，等价于cubic-bezier(0,0,1,1)；ease，慢速开始，然后慢速结束，等价于cubic-bezier(0.25,0.1,0.25,1)；ease-，以慢速开始，等价于cubic-bezier(0.42,0,1,1)；ease-out，以慢速结束，等价于cubic-bezier(0,0,0.58,1)；ease--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，动画应该轮流反向播放。
狼蚁网站SEO优化展示了这些元素的测试代码
<!DOCTYPE html>
<html>
<head>
<title>transition/transform</title>
</head>
<style type="text/css">
#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 /
}
</style>
<body>
<div id="div1">transition</div>
<div id="div2">transform rotate</div>
<div id="div3">transform scale</div>
<div id="div4">transform skew</div>
<div id="div5">transform translate</div>
<div id="div6">transform</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>transition/transform</title>
</head>
<style type="text/css">
/ animation /
.div7 {
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s fite;
animation-direction:alternate;
/ Safari and Chrome /
-webkit-animation:myfirst 5s fite;
-webkit-animation-direction:alternate;
}
@keyframes myfirst{
0% {background:red; left:0px; :0px;}
25% {background:yellow; left:200px; :0px;}
50% {background:blue; left:200px; :200px;}
75% {background:green; left:0px; :200px;}
100% {background:red; left:0px; :0px;}
}
@-webkit-keyframes myfirst {/ Safari and Chrome /
0% {background:red; left:0px; :0px;}
25% {background:yellow; left:200px; :0px;}
50% {background:blue; left:200px; :200px;}
75% {background:green; left:0px; :200px;}
100% {background:red; left:0px; :0px;}
}
@-moz-keyframes myfirst {/ Firefox /
0% {background:red; left:0px; :0px;}
25% {background:yellow; left:200px; :0px;}
50% {background:blue; left:200px; :200px;}
75% {background:green; left:0px; :200px;}
100% {background:red; left:0px; :0px;}
}
@-o-keyframes myfirst {/ Opera /
0% {background:red; left:0px; :0px;}
25% {background:yellow; left:200px; :0px;}
50% {background:blue; left:200px; :200px;}
75% {background:green; left:0px; :200px;}
100% {background:red; left:0px; :0px;}
}
</style> <body> <div class="div7">animation</div> </body> </html>
以上所述是长沙网络推广给大家介绍的css动画属性使用及实例代码(transition/transform/animation) ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，长沙网络推广会及时回复大家的！