通过动画可以实现一些更加复杂的交互效果
它不用等待触发事件
可以自动播放

animation简写

animation: name 400ms steps(6) alternate-reverse infinite;

要实现css动画，必须要先设置关键帧

@keyframes

指定动画每一步执行的位置
这里的to和from应该是同属性切换

            @keyframes name{
                from{}
                to{}
            }

            @keyframes name{
                0%{}
        50%{}
                100%{}
            }

from

指定动画的开始位置

to

指定动画的结束位置

然后在执行动画的元素上，设置动画细节

animation-name

指定动画的名字

animation-duration

指定动画持续的时间

animation-delay

动画的延迟

animation-timing-function

指定动画的时间函数

steps()

steps(2,end)
有几个图片的写几步
@keyfram写图片的最后一个位置

            @keyframes name{
                0%{
                    background-position: 0 0;
                }
                100%{
                    background-position: （这里图片多宽就写多少）-3000px 0;
                }
            }

animation-iteration-count

动画执行的次数
iteration（迭代）

infinite

表示循环执行

            .box1{
                height: 271px;
                width: calc(528px / 4);
                background-image: url(image/1.png);
                margin: 0 auto;
                background-position: 0 0;
                animation-name: name;
                animation-duration: 400ms;
        animation-delay:3s;
        animation-timing-function:steps(3,end);
        animation-iteration:infinite;
            }
            @keyframes name{
                from{
                    background-position: 0 0;
                }
                to{
                    background-position: calc(-528px / 4 * 3) 0;
                }
            }

animation-play-state

动画的播放的状态

paused

动画暂停

running

动画运行
默认值

animation-direction

动画执行的方向

normal

默认值
动画从0%到100%

reverse

反向执行

alternate

交替的
第一次从0到100
第二次从100到0

alternate-reverse

反向交替