小球无规则移动（动画参数AnimationParameters）

一。介绍

   本功能主要是用到了animation属性--参数有以下几种

   速度（Speed）：动画速度控制动画所需要的时间，可以从快到慢，或者相反。常见的有“缓动”（easing）、逐帧（frame by frame）和逐帧变速（frame by frame acceleration）等。

   时长（Duration）：动画的结束时间点，时长的设定会直接影响到动画的效果。

   形式（Form）：形式控制着动画的变化趋势，即动画的变化是先加快，还是缓慢、然后加快，或者是一直处于一种状态。常见的有缓动（easing）、线性（linear）、持续（continuous）和逐渐（gradually）等。

   加速度（Acceleration）：控制动画中是加速运动还是减速运动，可以设定加速度，从而让动画发生大的变化更加生动。

   重复（Repeat）：让动画能够在设定时间范围内重复循环播放，才能更加流畅。

   镜像（Mirror）：将动画翻转，使动画能够按照设定的顺序来播放动画。

   交互（Interactive）：这是一种特殊的可交互动画，它可以根据不同的视图和状态来进行动画变换，从而使动画视觉效果更加突出。

二。代码如下

    <div class="box"></div>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: skyblue;
            animation: move 2.6s linear infinite alternate,
                hor 3.2s linear infinite alternate;
        }

        @keyframes move {
            to {
                left: calc(100vw - 50px);
            }
        }

        @keyframes hor {
            to {
                top: calc(100vh - 50px);
            }
        }
    </style>