CSS3动画属性
CSS3动画属性
CSS3动画分为2d和3d动画
2d变形属性
2d的变形是在平面位置内进行移动、缩放、旋转、倾斜的变化
变形属性：transform
1、位移
属性：transform:translate(参数1，参数2)
<style>
div{
width: 300px;
height: 300px;
background: orange;
}
h2{
width: 100px;
height: 100px;
background: orchid;
/* 向右移动200px，向下移动100px */
transform:translate(200px,100px);
}
</style>
<body>
<div>
<h2></h2>
</div>
</body>
运行截图：
2、缩放
属性： transform:scale((参数1，参数2)
3、旋转
属性：transform:rotate()
<style>
div{
width: 300px;
height: 300px;
background: orange;
}
h2{
width: 100px;
height: 100px;
background: orchid;
}
h2:hover{
/* 鼠标划过h2，旋转75度持续1秒 */
transition: 1s;
/* 绕中心点旋转75度 */
transform: rotate(75deg);
}
</style>
4、倾斜
属性：transform:skew()
小提示： 如果transform有两个功能函数：先写位移 再写旋转/缩放/倾斜
3d变形属性
（3D变形与2D变形类似）
1、 3D的位移：
transform:translate3D(x,y,z);
2、3D的旋转：
transform:rotate();
rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]
- x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
- y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
- z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
3、3D缩放： transform:scale3d(x,y,z);
以下是3d空间的旋转示例（运行结果可自行查看）
.box{
width:400px;
height:300px;
background:orange ;
background-size:100% 100%;
margin:100px auto;
/* 形成3D空间 */
transform-style:preserve-3d;
transform:rotateY(50deg);
}
h2{
width:200px;
height:200px;
background:blue ;
transition:1s;
}
.box:hover h2{
transform: rotateX(80deg);
}
<body>
<div class="box">
<h2></h2>
</div>
</body>
关键帧动画
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
或
@keyframes mymove{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}
.box{
width:800px;
height:500px;
background:orange;
margin:50px auto;
position:relative;
}
h2{
width:100px;
height:100px;
background:blue;
position:absolute;
left:0;top:0;
/* 用animation 调用关键帧 */
animation:h2Move 3s infinite;
}
.box:hover h2{
/* 鼠标滑过动画暂定 */
animation-play-state:paused;
}
/* 制定关键帧 */
@keyframes h2Move{
0%{
left:0;top:0;
}
25%{
left:700px;top:0;
}
50%{
left:700px;top:400px;
}
75%{
left:0;top:400px;
}
100%{
left:0;top:0;
}
}
</style>
</head>
<body>
<div class="box">
<h2></h2>
</div>
</body>
上一篇： jQuery的动画
下一篇： jQuery animate()动画