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>