在CSS样式中用关键帧规则实现动画效果

老K博客

发布于 2024-03-10 09:36:42

840

发布于 2024-03-10 09:36:42

@keyframes关键帧规则

要想让网页上的元素根据某个关键帧规则来执行动画效果，我们需要先用如下格式来定义对应的关键帧规则。

@keyframes 自定义的动画名称 {
    /* 样式规则 */
}

首先我们要为这个关键帧规则自定义一个名字，将来网页上的元素可以通过指定这个名字来执行对应的动画效果。

在样式规则中我们可以用名为from的关键帧选择器设定动画开始时的各个样式属性的值，用名为to的选择器设定动画结束时各个属性到达的值。在视频课程中旋转头像图标的方式就是用了from和to关键字来定义的。另外还可以将from和to替换为0%和100%，并可以通过设定在0-100之间的百分比来定义样式变更过程中的时间点百分比。视频课程中变换置顶图标背景色时用到了百分比形式的关键帧选择器。

@keyframes spinning {
    from{
        transform:rotate(0);
    }
    to{
        transform: rotate(360deg);
    }
}

@keyframes colors {
    0%{
        background-color: chocolate;
    }
    25%{
        background-color: aqua;
    }
    50%{
        background-color: yellow;
    }
    75%{
        background-color: violet;
    }
    100%{
        background-color: chocolate;
    }
}

如果不同的百分比中样式的设定相同，我们也可以将其合并为一个，用逗号来分隔不同的百分比，例如视频例子中的0%和100%的样式一样，我们可以进行如下改写：

@keyframes colors {
    0%, 100%{
        background-color: chocolate;
    }
    25%{
        background-color: aqua;
    }
    50%{
        background-color: yellow;
    }
    75%{
        background-color: violet;
    }
}

animation相关属性

利用@keyframes定义了关键帧规则后如何来调用它呢，这时就需要用到animation相关的属性了。

animation是通过元素的样式改变，补足在变化过程中的帧而产生动画效果，它与transition的不同的是，animation可以不需要事件触发，而且通过@keyframes的设定，变化过程中的样式可以通过添加不同时间点或称为路径点上的关键帧来定义。

为一个网页中的元素添加用@keyframes定义的动画效果，我们需要在这个元素对应的样式表选择器中指定所要用到的动画名称animation-name，这个名字也就是我们在定义@keyframes时自定义的名字；animation-duration设定了播放1次所需的时间；animation-iteration-count给出了播放次数；如果需要延时播放，可用属性animation-delay设定；如果要控制动画的播放或暂停，可用属性animation-play-state；另外还可以用属性animation-direction、animation-timing-function、animation-fill-mode来改变播放效果。

我们设定了所用动画名称为colors，一次动画的时常为5秒，循环播放：

.backtotop:hover{
    transform: translateY(-10px);
    /* background-color: lightblue; */
    opacity: 1;
    animation-name: colors;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

另外也可以将animation属性简化来书写：

backtotop:hover{
    transform: translateY(-10px);
    /* background-color: lightblue; */
    opacity: 1;
    /* animation-name: colors;
    animation-duration: 5s;
    animation-iteration-count: infinite; */
    animation: 5s infinite colors;
}