@Keyframes无法正常工作

Question

我试图用@keyframes制作动画。但是，这个例子不起作用。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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。