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>