css - @Keyframes 不工作

Question

我正在尝试使用 @keyframes 制作动画。但是，该示例不起作用。

.main{
 width:100%;
 height:500px;
 border: 1px solid black;
}

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    100% {
        background-color: blue;
    }
}

<div class="main"></div>

Answer 1

您需要通过 animation 属性在您的样式声明中引用它:

.main{
 animation: 5s change-bg-color;
 width:100%;
 height:500px;
 border: 1px solid black;
}

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    100% {
        background-color: blue;
    }
}

<div class="main"></div>

MDN 对 CSS 中的动画有一个很好的概述，它将告诉您所有您需要了解的关于配置动画以按照您想要的方式运行的信息:https://developer.mozilla.org/en/docs/Web/CSS/animation .