动画

/* 创建动画名 */<br />

animation-name: move;

        /* 设置动画的持续时间，单位：秒s */<br />

animation-duration: 2s;

        /* 设置动画的速度类型<br />                ease：默认值，逐渐减速。<br />                ease-in：加速。ease-out:减速。<br />                ease-in-out:先加速后减速。<br />                linear：匀速。 */<br />

animation-timing-function: linear;

        /* 设置动画的次数，默认只执行一次，<br />                值：number 添加次数。<br />                    infinite:无限次 */<br />

animation-iteration-count:infinite;

        /* 设置动画的运动方向：<br />                normal：默认值，正常方向<br />                reverse：反方向<br />            ！注意：以下两个值动画循环次数要多次才有效果。<br />                alternate:动画先正常方向运动再反方向运动<br />                alternate-reverse：动画先反方向运动再正常方向运动*/<br />

animation-direction:alternate;

        /* 保持动画结束后的状态 */<br />

animation-fill-mode: forwards;

        /* 设置动画的延迟执行时间 */<br />

animation-delay: 2s;

        /* 动画的执行控件<br />            running：开始动画。<br />            paused：暂停动画。<br />             */

animation-play-state: running;

开始动画

    @keyframes：创建动画，创建关键帧<br />        动画内部使用百分比设置关键帧，每个关键帧中都要设置一个相同的样式

    @keyframes move{
            /* 动画开始的状态 */
            0%{
                left: 240px;
            }
            /* 动画结束的状态
            注意：初始状态和结束状态的属性一定要保持一致。否则，不能实现动画效果 */
            100%{
                left: calc(100% - 120px);
            }
        }

animation 和 transition的区别：
animation属性类似于transition，都属于随着时间改变元素的属性值。
其主要的区别在于：
transition需要触发一个事件才会随着时间而改变css属性。
animation在不需要触发事件的情况下，也会随着时间而改变css属性。
1.动画不需要事件触发，过渡需要。
2.过渡只有一组：开始的状态和结束的状态。
关键帧动画：可以设置每一帧到的动画状态，一般用于复杂的动画效果。