动画+过渡+弹性布局

动画

动画是从一种状态转变为另一个状态的过程.这就涉及到了另个名词帧率.我们把一个过程分为起始状态和结束状态，他们中间无数个小时间节点就是帧，每一帧有每一个状态。这些状态在一定的时间内连续执行就形成了动画。

创建动画的工程:

动画的名称:animation-name:动画的名称

动画的周期:animation:6s

动画的时间速度曲线:animation-timing-function:linear

动画的次数:animation-iteration-count:infinite(无限)

动画的暂停:animation-play-state:paused

动画的开始:

@key frames {

        from{ }(开始的状态)

        to{ }(结束的状态)

}

综合设置: animation: move 4s linear infinite;

代码如下:

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;

            /* 2使用 */
            animation: move 4s linear infinite;
            /* animation-delay: 2s;
            animation-iteration-count: infinite; 
            animation-direction: alternate; 

            animation: myfirst 5s linear 2s infinite alternate;  */