CSS3动画错误

Question

.button { 
 
    background-color: #4CAF50; /* Green */ 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
    -webkit-transition-duration: 0.4s; /* Safari */ 
 
    transition-duration: 1s; 
 
} 
 

 
@-webkit-keyframes { 
 
    0% {background-color:#4CAF50;} 
 
25% {background-color: red;} 
 
50% {background-color: yellow;} 
 
75% {background-color: blue;} 
 
100% {background-color: orange;} 
 
} 
 
.button2:hover { 
 
    height: 250px; 
 
    min-width: 200px; 
 
    font-size: 75px; 
 
    font-family: american captain; 
 
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); 
 
    transform: rotate(360deg); 
 
}

<button class="button button2">Shadow on Hover</button>

我已经开始学习CSS3动画。我想要做的所有动画似乎运行良好，除了我在“关键帧”中放置的颜色变化。我从中学习动画的网站显示了完全相同的方式，但它似乎不适用于我的项目。任何帮助将不胜感激。感谢:-)

Answer 1

你必须给动画name..and然后应用动画作为一个属性...

@-webkit-keyframes color-change { 
    0% { 
    background-color: #4CAF50; 
    } 
    25% { 
    background-color: red; 
    } 
    50% { 
    background-color: yellow; 
    } 
    75% { 
    background-color: blue; 
    } 
    100% { 
    background-color: orange; 
    } 
} 

.button { 
    animation: color-change 12s ease infinite; 
} 

.button { 
 
    background-color: #4CAF50; 
 
    /* Green */ 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
    animation: color-change 12s ease infinite; 
 
    -webkit-transition-duration: 0.4s; 
 
    /* Safari */ 
 
    transition-duration: 1s; 
 
} 
 
@-webkit-keyframes color-change { 
 
    0% { 
 
    background-color: #4CAF50; 
 
    } 
 
    25% { 
 
    background-color: red; 
 
    } 
 
    50% { 
 
    background-color: yellow; 
 
    } 
 
    75% { 
 
    background-color: blue; 
 
    } 
 
    100% { 
 
    background-color: orange; 
 
    } 
 
} 
 
.button2:hover { 
 
    height: 250px; 
 
    min-width: 200px; 
 
    font-size: 75px; 
 
    font-family: american captain; 
 
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); 
 
    transform: rotate(360deg); 
 
}

<button class="button button2">Shadow on Hover</button>