css3动画使用(快熟上手，一看就懂)**1、设置一个标签 2、通过类名设置样式解析样式功能如下图 animation

**1、设置一个标签

<body>
    <p class="a1">啦啦啦啦</p>
</body>

2、通过类名设置样式

<style>
    .a1 {
            animation: dong 2s linear 1s infinite;
            transform-origin: bottom;
            border-bottom: 1px solid #000;
        }
     //设置开始到结束的关键帧
     @keyframes dong{
            0%{
                transform: translateY(0);
                color: red;
            }
            50%{
                transform: translateY(20px);
                color: green;
            }
            100%{
                transform: translateY(0);
                color: blue;
            }
        }
</style>

解析样式功能如下图

animation复合属性顺序标

 `animation-name`：指定要绑定到选择器的关键帧名称。这是必需的，因为它告诉浏览器要应用哪个动画。
 `animation-duration`：定义动画完成一个周期所花费的时间。默认值是`0`，意味着动画不会播放。
 `animation-timing-function`：定义动画的速度曲线。这决定了动画在关键帧之间如何过渡。默认值是`ease`，表示动画开始慢，然后变快，最后再变慢。
 `animation-delay`：定义动画开始之前的延迟时间。默认值是`0`，意味着动画会立即开始。
 `animation-iteration-count`：定义动画应该播放的次数。默认值是`1`，但你可以设置为`infinite`来让动画无限循环。
 `animation-direction`：定义动画是否应该反向播放。默认值是`normal`，意味着动画正常播放。其他可能的值包括`reverse`（动画反向播放）、`alternate`（动画先正常播放，然后反向播放，以此类推）和`alternate-reverse`（动画先反向播放，然后正常播放，以此类推）。
 `animation-fill-mode`：定义动画在播放之前、之后和之间如何应用样式。例如，`forwards`表示动画结束后保持最后一个关键帧的样式。
 `animation-play-state`：指定动画是否正在运行或已暂停。默认值是`running`，但你可以设置为`paused`来暂停动画。

顺序内不写不影响定义之后的属性，一般定义那四个足够了。