Css3动画属性是什么？怎么实现

互联网 18-10-16

本篇文章给大家带来的内容是关于Css3动画属性是什么？怎么实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

Transform动画属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

rotate3d(x,y,z,angle) x,y,z那个属性 1 就围绕那个轴转动角度deg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link href="css/index.css" rel="stylesheet" type="text/css" /> </head> <style type="text/css"> *{       margin:0px;       padding:0px;     } img{ display:block;} .wrap{       border:1px solid #ff0000;       width:380px;       height:565px;       margin:0 auto;       position:relative;       top:50px;          -webkit-animation:upDown 2s linear infinite; } @-webkit-keyframes upDown{       0%{-webkit-transform:translateY(0);}            50%{-webkit-transform:translateY(20px);}       100%{-webkit-transform:translateY(0px);} } @-webkit-keyframes rota_head{       0%{-webkit-transform:rotate(0);}           50%{-webkit-transform:rotate(-5deg);}       100%{-webkit-transform:rotate(0);} } .head{       border:1px solid #ff0000;       position:absolute;       top:10px;       left:0;       z-index:1;          -webkit-animation:rota_head 2s linear infinite; } @-webkit-keyframes eye_open{       0%{opacity:1;}       85%{opacity:1;}       90%{opacity:0;}            100%{opacity:1;}    } .eye_open{       position:absolute;       top:25px;       left:40px;       -webkit-animation:eye_open 2s linear infinite; } @-webkit-keyframes eye_close{       0%{opacity:0;}       85%{opacity:0;}       90%{opacity:1;}            100%{opacity:0;}    } .eye_close{       position:absolute;       top:37px;       left:40px;          -webkit-animation:eye_close 2s linear infinite;   } .body{       position:absolute;top:25px;left:8px; } .foot{ position:absolute;left:8px;bottom:0px;}   </style> <body> <div>       <div>           <img src="imgs/sprite_43.png" alt="">         <img src="imgs/shape_45.png" alt="">         <img src="imgs/shape_46.png" alt="">     </div>     <div>           <img src="imgs/sprite_40.png">     </div>     <div>           <img src="imgs/shape_41.png">     </div> </div> </body> </html>

以上就是对的全部介绍Css3动画属性是什么？怎么实现，如果您想了解更多有关CSS3视频教程，请关注PHP中文网。

以上就是Css3动画属性是什么？怎么实现的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：实现