CSS3 动画总结
CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript
CSS3动画的属性主要分为三类：
transform 转换动画、直接动画
transition 过渡动画
animation 帧动画
transform（转换动画、直接动画）
1.rotate（旋转）
包含三种状态，x、y、z三轴的变化rotatex、rotatey、rotatez（默认）
旋转（rotate）实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style>
.block{
width:100px;
height:100px;
background-color: aqua;
margin:15% auto;
transform: rotate(45deg);
}
/*动画写在主样式里，页面加载完成之后就执行*/
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>
2.translate（平移）
包含三种状态，x、y、z三轴的变化translatex（默认）、translatey、translatez
平移（translate）实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate</title>
<style>
.block{
width:100px;
height:100px;
background-color: aqua;
transform: translate(100px);
}
/*动画写在主样式里，页面加载完成之后就执行*/
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>
3.skew（变形）
包含两种状态，x和y的变化skewx（默认）、skewy
变形（skew）实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skew</title>
<style>
.block{
width:100px;
height:100px;
background-color: aqua;
margin:15% auto;
transform: skew(30deg);
}
/*动画写在主样式里，页面加载完成之后就执行*/
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>
4.scale（伸缩比例）scale两个参数时，分别是宽度和高度的比例scale一个参数时，是等比例缩放
伸缩比例（scale）实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scale</title>
<style>
.block{
width:100px;
height:100px;
background-color: aqua;
margin:15% auto;
transform: scale(2);
}
/*动画写在主样式里，页面加载完成之后就执行*/
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>
transform相关补充：transform-orgin：2d，3d转换中心的设置transform-style:preserve-3d 2d转化为3d动画
transition（过渡动画）
transition-property 过渡的属性
transition-delay 延迟时间
transition-duration 动画过渡时间
transition-timing-function 过渡效果的时间曲线：linear（匀速）ease（慢-快-慢）ease-in（开始慢）ease-out（结束慢）ease-in-out（开始、结束慢）
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
.block{
width:100px;
height:100px;
background-color: aqua;
transition: all 3s linear;
}
/*transition:过渡的属性 过渡时间 延迟时间 效果曲线*/
.block:hover{
height:300px;
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>
animation（帧动画）
当在@keyframe创建动画，把它绑定到一个选择器
animation-name 规定 @keyframes 动画的名称
animation-duration 执行动画所需时间，默认是0
animation-timing-function 规定动画的速度曲线 ，默认是ease
animation-delay 延迟时间，默认时0
animation-iteration-count 规定动画被播放的次数，默认是 1
animation-direction 规定动画是否在下一周期逆向地播放，默认是 normalnormal（正常）reverse（动画反向播放）alternate（奇数时正向播放，偶数时反向播放）alternate-reverse（奇数时反向播放，偶数式正向播放）