动画

动画其实就是过渡的加强版

其可以一直执行过渡

定义动画

@keyframes box1an {            0%{
            }            50%{                transform: translate(250px,0) rotate(-360deg);            }            100%{                transform: translate(500px,0) rotate(0deg);            }
        }

关键子@keyframes+动画名称来定义

0%-100%是这个动画完成的过程，在不同的进度下，动画发展到的状态在括号中填写。程序会自动执行变化过程

调用动画

在要调用的元素里写animation属性

.box1{
            width: 200px;            height: 200px;            background: red;            /*动画名称*/            animation-name:box1an ;            /*持续时间*/            animation-duration: 2s;            /*运动规则*/            animation-timing-function:ease;            /*延迟开始*/            animation-delay:1s;            /*执行次数，无限是infinite*/            animation-iteration-count: infinite;            /*每次结束一个动画循环后，下一次的执行样式*/            animation-direction: alternate;            transition: all 2s .5s;

        }

有几个要单独讲下

animation-timing-function

这是一个曲线运动的规则，除了我们知道的几个css运动规则（ease,ease-in,ease-out,linear)外，

它还提供了一个steps值，就是每一阶段分多少步完成

例子：

@keyframes box1an {            0%{                width: 0;            }            50%{                width: 200px;                background: yellow;            }            100%{                width: 400px;                background: blue;            }        }        .box1{
            width: 400px;            height: 200px;            background: red;            animation: box1an 5s steps(4) .5s infinite alternate ;        }

这里我们steps是4步，一共2个阶段，所以分8步来完成，看下效果

animation-direction

默认值normal,动画结束后，回到起始位置进行下一次循环

插入一个循环动画

alternate：动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代

reverse：反向运行动画，每周期结束动画由尾到头运行。

alternate-reverse：反向交替， 反向开始交替

动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

animation-fill-mode

字面意思就是动画结束时候的状态

默认值none

forwards 就是动画结束时，停止在结束时的状态

backwards就是动画结束时，回到开始时的状态

一般这个属性是不会和无限循环一起出现的。

animation-play-state

这是个控制动画开始，暂停的属性。

初始值肯定是running了，暂停值是paused

我们可以设定一个鼠标经过就暂停的代码

.box1:hover{            animation-play-state: paused;        }

来看下效果

动画简写

可以把多个属性写在一起简化

基本格式：

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画结束状态

例子：

animation: box1an 2s ease .5s infinite alternate ;

没有的或者用默认的就不写，写下一个