css3 动画

学习 Web 开发 | MDN (mozilla.org)

定义关键帧动画

@keyframes framesName {
    from {
        background-color: #fff;
    }
    
    to {
        background-color: #000;
    }
}

• @keyframes 关键字定义键帧动画
• framesName 该关键帧样式的名字
• from 开始时样式，过度到 to 样式
• to 结束时样式

使用百分比来定义关键帧

@keyframes framesName {
    0% {
        background-color: #fff;
    }

    25% {
        background-color: rgb(209, 7, 7);
    }

    65% {
        background-color: rgb(193, 196, 30);
    }

    100% {
        background-color: #000;
    }
}

在关键帧中可以定义任何样式，虽然有一些没有动画过渡。关键帧可以是0%~100%。

在定义关键帧是写的先后顺序是没有要求的。

若没有定义起始(from)关键帧将以元素的现有样式作为起始关键帧，结束(to)关键帧同理。

同时声明关键帧样式

@keyframes framesName {
    25% {
        background-color: rgb(209, 7, 7);
    }
    
    0%, 55% {
        background-color: #fff;
    }
    
    55% {
  font-size: 10px;
    }
}

与写css的组合选择器一样，使用,分隔选择器将相同的样式定义在一起。

应用关键帧动画

• animation-name 关键帧动画名称
• animation-duration 动画执行持续时间，单位：s ms

<style>
    .box {
        width: 300px;
        height: 300px;
        background-color: #eee;
        border: 1px solid #000;
    }

    @keyframes bgcolor {
        25% {
            background-color: red;
        }

        75% {
            background-color: #6cf;
        }
    }

    @keyframes radius {
        50% {
            border-radius: 50%;
        }
    }

    span {
        display: block;
        width: 50px;
        height: 50px;
        background-color: rgb(53, 240, 6);
        animation-name: bgcolor, radius;
        animation-duration: 2s, 3s;
    }
</style>


<div class="box">
    <span></span>
</div>

一个元素可以应用多个动画，多个名称以逗号分隔。

动画与持续时间一一对应，持续时间可以只写一个，表示所有动画都执行该时长。

当时间与动画对不上时，多出的动画将应用第一个时间。

animation-name: a, b, c; animation-duration: 2s, 3s; /*动画 c 将应用 2s*/

当动画属性重叠

当多个动画的样式属性发生冲突时，以后应用的动画样式为准。即应用动画时后应用的动画样式优先级更高。

animation-name: a, b; 当b与a有相同的样式时，那么就是b的样式生效。

此优先级只存在于动画持续时间内，如果b的持续时间是2s，a的持续时间是4s。那么在2秒后a的样式就会生效。

属性中间值

只有拥有中间值的css属性才能产生动画效果。

CSS 动画属性 - CSS（层叠样式表） |断续器 (mozilla.org)

例：

@keyframes name {
    from {
        width: 100px;
        border: dotted 1px #000;
    }
    to {
        width: 200px;
        border: solid 1px #000;
    }
}

width 属性在动画中的中间值为：101px-199px; 其效果便是从100px 到 200px 逐步变化的。

border 属性的实线 和点线 是什么就什么，没有中间值；和人的性别一样，只有两个状态。

注意：有没有中间值本质上是浏览器支不支持的问题，这并不是绝对的真理；就和人的性别一样。

动画执行的次数

动画执行的次数使用 animation-iteration-count 属性设置。

.box {
    animation-name: test;
    animation-duration: 2s;
    animation-iteration-count: 10; /*重复执行10次*/
}

@keyframes test {
    from {
        background-color: antiquewhite;
    }

    to {
        background-color: blue;
    }
}

无限次执行 使用 infinite 属性值

animation-iteration-count: infinite;

动画执行的方向

animation-direction 属性控制动画执行的方向

动画的延迟

animation-delay 延迟指定时间后开始执行动画

animation-delay: 2s;

动画的速率

动画在执行过程中速度的变化是由animation-timing-function属性控制，其本质是贝塞尔曲线。

在线生成 贝塞尔曲线

步进动画

使用 animation-timing-function 属性的 steps 属性值。

animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: steps(3, start);
animation-timing-function: steps(3, end);

动画的播放暂停

使用 animation-play-state 属性

animation-play-state: paused; /* 暂停 */
animation-play-state: running; /* 播放 */

动画的填充模式

使用 animation-fill-mode 属性

animation-fill-mode: none;
/*默认值*/

animation-fill-mode: backwards;
/*在动画执行前停在第一帧*/

animation-fill-mode: forwards;
/*当动画执行结束后停在最后一帧*/

animation-fill-mode: both;
/*兼顾 backwards 和 forwards 属性值*/

动画的组属性

animation - CSS（层叠样式表） | MDN (mozilla.org)

animation: name 3s; /* 必要的两个值，关键帧动画名 和 持续时间 */

/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;