帧动画

动画属性

不是所有 css 属性都有过渡效果，查看支持动画的 CSS 属性 ，一般来讲有中间值的属性都可以设置动画如宽度、透明度等。

心动

<style>
    div.love-animation-heart {
        position: relative;
        transform: rotate(135deg);
        animation: love-animation-heart 2s linear infinite;
        width: 100px;
        height: 100px;
        background: red;

        &::before {
            content: '';
            background: red;
            width: 100px;
            height: 100px;
            display: inline-block;
            transform: translateX(-50%);
            border-radius: 50%;
        }

        &::after {
            content: '';
            background: red;
            width: 100px;
            height: 100px;
            display: inline-block;
            border-radius: 50%;
            transform: translate(0, -50%);
        }
    }

    @keyframes love-animation-heart {
        0% {
            transform: rotate(135deg) scale(0);
        }

        100% {
            transform: rotate(135deg) scale(1);
        }
    }
</style>
<div class="love-animation-heart"></div>

动画方向

使用 animation-direction 控制动画运行的方向。

选项	说明
normal	从 0%到 100%运行动画
reverse	从 100%到 0%运行动画
alternate	先从 0%到 100%，然后从 100%到 0%
alternate-reverse	先从 100%到 0%，然后从 0%到 100%

步进速度

步进需要先理解状态，原始状态、初始状态、结束状态。

过渡使用阶梯化呈现，有点像现实生活中的机械舞，下面是把过渡分五步完成。

选项	说明
steps(n,start)	设置 n 个时间点，第一时间点变化状态，即原始状态。
steps(n,end)	设置 n 个时间点，第一时间点初始状态
step-start	等于 steps(1,start)，可以理解为从下一步开始，即第二步开始。
step-end	等于 steps(1,end)，可以理解为从当前步开始，第一步即为初始状态

steps

steps(n,start) 可以简单理解为从第二个开始，steps(n,end) 从第一个开始。

播放状态

使用 animation-play-state 可以控制动画的暂停与运行。

选项	说明
paused	暂停
running	运行

填充模式

animation-fill-mode 用于定义动画播放结束后的处理模式，是回到原来状态还是停止在动画结束状态。

选项	说明
none	需要等延迟结束，起始帧属性才应用
backwards	动画效果初始状态为起始帧，不等延迟结束即显示为起始帧，结束后停留在原始帧
forwards	结束后停留动画的最后一帧
both	包含 backwards 与 forwards 规则，即动画效果在起始帧，不等延迟结束，并且在结束后停止在最后一帧