CSS动画

简介：当涉及到在网页中添加动画效果时，CSS提供了两种主要的方法：帧动画（CSS Animation）和过渡动画（CSS Transition）。这两种技术各自适用于不同的动画需求和场景。

CSS 过渡动画（CSS Transitions）

CSS过渡动画提供了一种简单的方式来在元素的状态发生变化时，以平滑的方式实现动画效果。它的基本思想是定义当某些CSS属性的值发生变化时，应用一个过渡效果，使得这些变化显得平滑和自然。

语法

.element {
    transition-property: property1 property2 ...;
    transition-duration: time;
    transition-timing-function: timing-function;
    transition-delay: time;
}

• transition-property：指定需要过渡动画的CSS属性，可以是一个或多个属性，如 width, height, opacity 等。
• transition-duration：定义过渡的持续时间，可以使用秒（s）或毫秒（ms）单位。
• transition-timing-function：指定过渡效果的时间函数，控制过渡过程中速度的变化，例如 ease, linear, ease-in-out 等。
• transition-delay：可选属性，指定过渡效果开始之前的延迟时间。

• transition: 要产生动画的属性 动画时长 速度方式 延迟时间;
  transition: 要产生动画的属性 动画时长 速度方式 延迟时间, 要产生动画的属性 动画时长 速度方式 延迟时间;

• 使用实例

.button {
    background-color: blue;
    transition-property: background-color;
    transition-duration: 0.3s;
}

.button:hover {
    background-color: red;
}

在这个例子中，当鼠标悬停在按钮上时，按钮的背景颜色会从蓝色平滑过渡到红色，过渡时间为0.3秒。

CSS 帧动画（CSS Animations）

CSS帧动画允许开发者定义更复杂的动画序列，通过关键帧（keyframes）来指定动画的每个阶段。这种方式更加灵活，能够实现更复杂和精细的动画效果。

基本语法

@keyframes animation-name {
    0% {
        /* 初始状态 */
        property: value;
    }
    50% {
        /* 中间状态 */
        property: value;
    }
    100% {
        /* 最终状态 */
        property: value;
    }
}

.element {
    animation-name: animation-name;
    animation-duration: time;
    animation-timing-function: timing-function;
    animation-delay: time;
    animation-iteration-count: number;
    animation-direction: direction;
    animation-fill-mode: fill-mode;
    animation-play-state: play-state;
}

• @keyframes：定义关键帧动画序列的名称和具体的关键帧百分比状态。
• animation-name：指定要应用的关键帧动画名称。
• animation-duration：定义动画的持续时间。
• animation-timing-function：指定动画的时间函数。
• animation-delay：可选属性，定义动画开始之前的延迟时间。
• animation-iteration-count：定义动画播放次数，可以是具体次数或 infinite 表示无限循环。
• animation-direction：指定动画播放的方向，如 normal, reverse, alternate 等。
• animation-fill-mode：定义动画在非播放状态时如何呈现样式。
• animation-play-state：定义动画的播放状态，如 paused 或 running。

使用示例

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.button {
    animation-name: pulse;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

简单更好理解的示例

@keyframes 动画名称{
    from{
        初始状态的样式
    }
    50%{
        中间状态的样式
    }
    to{
        结束状态的样式
    }
}

使用动画

标签{
    animation: 动画名称 时长 延迟时间 速度方式 动画次数 正反方向;
}

在上面例子代码第一个中，按钮会以一个脉动的动画效果无限循环缩放。

区别和选择

• 复杂度和灵活性：过渡动画适合简单的状态变化，如悬停效果或者颜色变化；而帧动画则更适合需要复杂动画序列或者精细控制的动画效果。

• 性能：过渡动画通常比帧动画更轻量，因为它们的动画计算由浏览器自动优化，尤其是在简单的CSS属性变化时。

• 支持度：过渡动画在各种现代浏览器中都有很好的支持，而帧动画也得到了广泛支持，但在一些旧版浏览器可能需要额外的兼容处理。

综上所述，选择使用过渡动画还是帧动画取决于你的具体需求和动画效果的复杂程度。对于简单的状态变化和交互效果，过渡动画通常是首选；而对于复杂的动画序列或者需要更精细控制的效果，帧动画则更为合适。