在开发中，一个好的用户操作界面，总会夹杂着一些动画。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)；ea，慢速开始，然后慢速结束，等价于cubic-bezier(0.25,0.1,0.25,1)；ea-in，以慢速开始，等价于cubic-bezier(0.42,0,1,1)；ea-out，以慢速结束，等价于cubic-bezier(0,0,0.58,1)；ea-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)；ea，慢速开始，然后慢速结束，等价于cubic-bezier(0.25,0.1,0.25,1)；ea-in，以慢速开始，等价于cubic-bezier(0.42,0,1,1)；ea-out，以慢速结束，等价于cubic-bezier(0,0,0.58,1)；ea-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，动画应该轮流反向播放。
下面展示了这些元素的测试代码：
<!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 ea,height 2s ea; -moz-transition: width 2s ea,height 2s ea; /* firefox 4 */ -webkit-transition: width 2s ea,height 2s ea; /* safari 和 chrome */ -o-transition: width 2s ea,height 2s ea; /* 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 infinite; animation-direction:alternate; /* safari and chrome */ -webkit-animation:myfirst 5s infinite; -webkit-animation-direction:alternate; } @keyframes myfirst{ 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst {/* safari and chrome */ 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }
@-moz-keyframes myfirst {/* firefox */
0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 关于妈妈的诗50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}
} @-o-keyframes myfirst {/* opera */
0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}
}</style> <body> <div class="div7">animation</div> </body> </html>
本文发布于:2023-04-03 14:11:38，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/f7ffea121eec670c1e9b90cf967ff6f2.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：css动画(transition/transform/animation).doc
本文 PDF 下载地址：css动画(transition/transform/animation).pdf
| 留言与评论（共有 0 条评论） |
