一，动画的使用必须要准备
1，准备动画@keyframes关键字定义
2，需要为想要使用动画的dom元素 添加一系列的动画属性。
/* 1，定义动画 */
@keyframes toright{
from{
/* from中如果不设置默认使用的是 初始状态 */
}
to{/* 移动方向 */
transform:translateX(800px);
}
}
/* 2，准备class 内部定义了动画的各种效果 */
.animation{
/* 动画的名字 */
animation-name:toright;
/* 动画持续多久 */
animation-duration:2s;
/* 设置动画的次数 infinite是无限*/
animation-iteration-count:infinite;
/* 动画的速度 线性 linear匀速 */
animation-timing-function:linear;
/* 动画的延迟时间 */
animation-delay:2s;
/* 动画的填充方式 */
animation-fill-mode:both;
}
/* 动画属性的符合写法： */
.animation-oneline{
/* 复合写法：
第一次出现的时间是持续时间，
第二次出现的时间是延迟时间。 */
animation:toright 1s 2s linear infinite;
}
二，精确设置动画的过程 ，分步设置动画
@keyframes stepAnimation{/* 动画可以分成多段 */
/* 起始状态 */
0%{
}
/* 动画播放一半 */
50%{
transform:translateX(1000px);
}
/* 返回到起始位置 */
100%{
transform:translateX(0);
}
}
.animation{
animation:toright 1s 2s stepAnimation;
}
三，小汽车案例：
从左到右后旋转180度
@keyframes autoMove{
0%{}
/* 移动到最右边 */
45%{
transform:translateX(1000px);
}
/* 原地旋转180度 */
50%{
/* 在移动到最右的基础上原地旋转translateX(1000px)，否则会瞬间回到起始位置 */
transform: translateX(1000px) rotateY(180deg);
}
/* 移动回最左边 */
95%{
transform: translateX(0px) rotateY(180deg);
}
}
.animation{
/* 3秒钟匀速播放 */
animation:autoMove 3s linear infinite;
}四，动画暂停，鼠标悬停：
animation-play-state:paused;
<style>
body{
perspective:1000px;
}
.container{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid gray;
background: url("wjtz.jpg") no-repeat center/cover;
position: relative;
transform-style:preserve-3d;
}
.item{
width:100%;
height: 100%;
position: absolute;
background: url("lf.jpg") no-repeat center/cover;
}
.item:nth-child(1){
transform:rotateY(0deg) translateZ(300px);
}
.item:nth-child(2){
transform:rotateY(60deg) translateZ(300px);
}
.item:nth-child(3){
transform:rotateY(120deg) translateZ(300px);
}
.item:nth-child(4){
transform:rotateY(180deg) translateZ(300px);
}
.item:nth-child(5){
transform:rotateY(240deg) translateZ(300px);
}
.item:nth-child(6){
transform:rotateY(360deg) translateZ(300px);
}
@keyframes autoMove{
from{}
to{
transform:rotateY(300deg);
}
}
.animation{
/* 3秒钟匀速播放 */
animation:autoMove 3s linear infinite;
}
/* 鼠标悬停时停止动画 */
.container:hover{
/* 动画状态 */
/* 如果要使用js操作该属性语法是:dom.style.animationPlayState="paused"; */
animation-play-state:paused;
/* 这里如果给animation重新赋值的话，会覆盖掉以上的animation效果，鼠标经过也会停止，但是不会是从鼠标悬停的那张图片开始播放，而是重新开始播放。 */
/* animation:haha; */
}
</style>
</head>
<body>
<div class="container animation">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>