mkimq

帧动画

通过定义一段动画中的关键点、关键状态来创建动画。Keyframes相比transition对动画过程和细节有更强的控制。

过渡动画是两个状态间的变化，帧动画可以处理动画过程中不同时间的细节变化，不过对过渡动画理解后再不习帧动画会非常容易，也可以把帧动画理解为多个帧之间的过渡动画。

关键帧

  • 使用@keyframes 规则配置动画中的各个帧
    • from 表示起始点
    • to表示终点
    • 可以使用百分数如 20%动画运行到20%时间时

基本使用

下面使用 @keyframes 定义了动画叫 hd 并配置了两个帧动作from/to ，然后在div元素中使用animation-name 引用了动画并使用animation-duration声明执行三秒。

动画命名不要使用CSS关键字如 none

div {
    width: 150px;
    height: 150px;
    background-color: #fff;
    border: solid 20px #ddd;
    animation-name: hd;
    animation-duration: 3s;
}

@keyframes hd {
    from {
        opacity: 0;
        transform: scale(.1);
    }

    to {
        opacity: 1;
    }
}

时间点

  • 帧动画需要定义在不同时间执行的动作，开始与结束可以使用 form/to 或 0%/100% 声明。
    • 必须添加百分号，25%是正确写法
    • 时间点没有顺序要求，即100%写在25%前也可以
    • 未设置0%与100% 时将使用元素原始状态

使用动画

  • 使用animation-name 规则可以在元素身上同时使用多个动画。
    • 使用多个动画时用逗号分隔
    • 多个动画有相同属性时，后面动画的属性优先使用

基本使用

div {
    width: 100px;
    height: 100px;
    background-color: #e67e22;
    animation-name: hd, scale;
    animation-duration: 3s;
}

@keyframes hd {
    25% {
        transform: translateX(300%);
    }

    50% {
        transform: translate(300%, 300%);
    }

    75% {
        transform: translate(0, 300%);
    }

    25%,
    75% {
        background: #9b59b6;
    }

    50%,
    100% {
        background: #e67e22;
    }

}

@keyframes scale {
    from {
        border-radius: 0;
    }

    75% {
        border-radius: 50%;
    }

    to {
        border-radius: 0;
    }
}

动画时间

  • 使用 animation-duration 可以声明动画播放的时间，即把所有帧执行一遍所需要的时间。
    • 可以使用m秒，ms毫秒时间单位
    • 可为不同动画单独设置执行时间
    • 如果动画数量大于时间数量，将重新从时间列表中计算

属性重叠

如果多个帧动画设置了相同的属性，不同浏览器的对待方式略有不同。比如 chrome/edge最新版本对动画的计算就有变化。

所以建议尽量不要在两个动画中控制相同的属性

动画属性

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

重复动画

  • 使用animation-iteration-count 规则设置动画重复执行次数，设置值为 infinite 表示无限循环执行。
    • 可同时设置元素的多个动画重复，使用逗号分隔
    • 如果动画数量大于重复数量定义，后面的动画将重新计算重复

动画方向

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

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

延迟动画

使用 animation-delay 规则定义动画等待多长时间后执行。

动画速率

值描述
linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease开始慢，然后快，慢下来，结束时非常慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in开始慢，结束快（等于 cubic-bezier(0.42,0,1,1)）
ease-out开始快，结束慢（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out中间快，两边慢（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值

可以在帧中单独定义，将影响当前帧的速率

  1. 弹跳小球
  1. 魔术小球

步进速度

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

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

animation-timing-function: steps(4, end)

填充模式

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

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

组合定义

  • 和CSS中的其他属性一样，可以使用animation组合定义帧动画。animation 属性是一个简写属性，用于设置六个动画属性：
    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction

必须存在 animation-duration属性，否则过渡时间为0没有动画效果。

贡献者: mankueng