css动画效果

css动画使用步骤:
    1. 定义动画关键帧
    2. 在选择器中通过animation属性使用动画关键帧

定义动画关键帧:
    语法:
        @keyframes 名字{
            0%{
                样式效果
            }
            ....
            100%{
                样式效果
            }
        }

animation属性的参数要求:
    参数1: 设置需要使用的动画关键帧, 必填.
    参数2: 设置动画执行的时间长度, 必填. 单位s
    参数3: 设置速度曲线, 选填. 默认ease, 常用linear
    参数4: 设置动画执行完毕后停留在哪里, 选填. 默认回到第一帧, forwards停留在最后一帧
          注: 只有动画执行次数有限情况在有必要设置此参数
    参数5: 设置动画执行的次数, 选填. 默认1次, 常用infinite(无限次)
    参数6: 设置动画执行的方向, 选填. 默认从0%-100%, 常用alternate(轮流)
    参数7: 设置动画延迟, 选填. 默认0, 单位s

    示例:匀速移动无限次
    动画关键帧:
    @keyframes view3 {
        0%{
            left: 0;
        }
        50%{
            left: 45vw;
        }
        100%{
            left: 95vw;
        }
    }


    .box6{
        width: 5vw;
        height: 5vw;
        position: absolute;
        background-color: green;
        animation: view3 6s linear forwards infinite;
    }