Css3动画属性怎么使用

2020-11-27 来源：爱够旅游网

今天我们来给大家说一下Transform动画属性的使用方法和以及使用技巧，使用动画属性需要注意哪些方面呢？下面给大家举一个小列子。

Transform动画属性

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

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

@keyframes name 预定义效果

animation 属性是一个简写属性，用于设置六个动画属性：

案列；

<!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 class="wrap">
 <div class="head">
 <img src="imgs/sprite_43.png" alt="">
 <img src="imgs/shape_45.png" alt="" class="eye_open">
 <img src="imgs/shape_46.png" alt="" class="eye_close">
 </div>
 <div class="body">
 <img src="imgs/sprite_40.png">
 </div>
 <div class="foot">
 <img src="imgs/shape_41.png">
 </div>
</div>
</body>
</html>

Css3动画的使用方法相信大家都已经了解了，更多精彩请关注Gxl网其它相关文章！

全部栏目

Css3动画属性怎么使用