02帧动画animation

CSS动画通过设置多个点精确控制一个或一组动画，用于实现复杂的动画效果。

动画由多个点组成，每个点拥有独立状态，这些状态通过浏览器处理为过渡效果，点与点间的过渡效果串联起来就是一个完整的动画。这些点叫做关键帧

关键帧动画可看作是一个连续的动画片段，逐帧动画可看作是一个断续的动画片段，两种动画都是通过时间流逝将多个动画片段串联在一起。浏览器可将关键帧动画的关键帧自动过渡为片段，而将逐帧动画的每帧根据顺序播放为片段，可认为逐帧动画是一个GIF。

一、API概览

animation包括八个子属性，每个子属性包括以下参数。

animation-name：名称

none：无动画(默认)

String：动画名称

animation-duration：持续时间

Time：秒或毫秒(默认0)

animation-timing-function：缓动函数

animation-delay：等待时间

Time：秒或毫秒(默认0)

animation-iteration-count：播放次数

Number：数值(默认1)

infinite：无限次

animation-direction：轮流反向播放(播放次数为一次则该属性无效果)

normal：正常播放(默认)

alternate：轮流反向播放，奇数次数正常播放，偶数次数反向播放

animation-play-state：播放状态

running：正在播放(默认)

paused：暂停播放

animation-fill-mode：播放前后其效果是否可见

none：不改变默认行为(默认)

backwards：在等待时间内或在动画开始前应用开始属性(在第一个关键帧中定义)

forwards：在动画结束后保持最后一个属性(在最后一个关键帧中定义)

both：向前与向后填充模式都被应用

二、使用&注意

三、原理

CSS 关键帧动画的主要思想是它将在不同的 CSS 代码块之间插值。而这件事情主要是由 CSS 的关键帧 @keyframes 来完成的。它是你在时间轴的每个阶段上指定动画应该做什么的地方。你可以将其视为为 Web 元素编排舞蹈例程。如果用专业的术语来描述的话，CSS 关键帧是用于为时间戳和时间轴分配动画状态的机制。


@keyframes pulse {
    0% {
        opacity: 0;
    }
    50% {
        scale: 1.4;
        opacity: 0.4;
    }
}

首先，你需要为动画命名（取个描述性的名字，比如 bounce 或 slideInLeft ），然后定义在动画的不同阶段发生的事情。这些阶段（或关键帧）可以定义为总动画持续时间的百分比，从而精确控制事件序列。

通过 @keyframes 定义了一个名为 pulse 的关键帧动画，在这个关键帧动画中，它主要做了两件事情：

第一件事情，它将平滑地将元素的透明度从 0% 过渡到 40% 在过渡到 100%

第二件事情，它将平滑地将元素从初始尺寸放大 1.4 倍，然后再回到初始尺寸

在 CSS 中，你可以将已定义好的关键帧动画（例如 pulse）视为全局变量。它是通用的和可重用的。我们可以使用 animation 属性将它应用于特定的选择器，


.pulser::after {
    animation: pulse 1000ms cubic-bezier(0.9, 0.7, 0.5, 0.9) infinite;
}

其中每种动画状态的开始和结束点都有一个特定时间点。使用关键帧在时间轴上映射这些关系。

浏览器会在关键帧之间插值

02帧动画`animation`

一、API概览

二、使用&注意

三、原理

四、实战