CSS 中的动画

CSS 中的动画有两部分 - @keyframes 和动画-*。

@keyframes at 规则

第一部分要求我们定义@keyframes。

这让我们可以指定应在动画持续时间的不同点应用的 CSS 样式。

不同的时间点以百分比值指定。可以指定 0 到 100% 之间的任意数量的偏移位置。

from 可用于偏移 0%，to 与偏移 100% 相同。

    @keyframes anim-name {
        from { css-style-a }
        to { css-style-b }
    }

下面的 CSS 样式已为一个属性 - 背景颜色的三个时间点指定。

    @keyframes colorit {
        0% { background-color: red; }
        50% { background-color: yellow; }
        100% { background-color: silver; }
    }

它也可以指定多个属性。

    @keyframes colorit {
        0% { 
            background-color: red; 
            left: 0px; 
            top: 50px;
        }
        50% { 
            background-color: yellow; 
            left: 50px; 
            top: 75px;
        }
        100% { 
            background-color: silver; 
            left: 200px;
            top: 25px;
        }
    }

动画-* 属性

这里是一个属性列表，可用于控制如何完成样式转换以提供动画的 UI/UX。

• 动画构图
• 动画延迟
• 动画方向
• 动画持续时间
• 动画填充模式
• 动画迭代次数
• 动画名称
• 动画播放状态
• 动画范围
• 动画范围结束
• 动画范围开始
• 动画时间线
• 动画计时函数

每个子属性都设置动画的某些方面。

下面是名为 colorit 的 @keyframes 的定义，运行 3 秒。

    div.box {
        ...
        animation-name: colorit;
        animation-duration: 3s;
        ...
    }

所有子属性都可以使用动画简写在一行中指定。

animation: 3s colorit;

浏览器执行所需的数学计算并渲染适当的动画。

同样，动画属性允许设计者控制延迟、时间、次数（迭代）、方向等，以实现他的愿景。

以上是CSS 中的动画的详细内容。更多信息请关注PHP中文网其他相关文章！