如何在按鈕輪廓上有顏色更改動畫？

Question

試圖重新創建https://daneden.github.io/animate.css/上的按鈕輪廓效果。我試圖查看代碼，但無法弄清楚什麼是觸發什麼，所以我從一些教程中創建了顏色變化效果，然後從animate.css頁面中剝離了按鈕樣式的CSS並將它們合併在一起。彩色動畫已應用於按鈕，但我似乎無法解決的是如何將該彩色動畫應用於輪廓和內部文本。我也想知道如何讓顏色變化更加漸進，即使在增加動畫持續時間之後它仍然感覺過於突然。

我嘗試： http://codepen.io/Dingerzat/pen/pNNgZj

/* CSS */ 
 

 
.modal__button { 
 
    -webkit-animation: hue 60s linear; 
 
    -o-animation: hue 60s linear; 
 
    animation: hue 60s linear; 
 
    background-color: transparent; 
 
    border: 2px solid #f35626; 
 
    color: #f35626; 
 
    cursor: pointer; 
 
    font-size: 15px; 
 
    outline: none; 
 
    padding: 7px 22px; 
 
    -webkit-transition: background-color .4s, color .4s; 
 
    -o-transition: background-color .4s, color .4s; 
 
    transition: background-color .4s, color .4s; 
 
} 
 
.color { 
 
    animation-name: color_change; 
 
    animation-duration: 10s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
} 
 
@-webkit-keyframes color_change { 
 
    0% { background-color: #da6e16; } 
 
    25% { background-color: #82da16; } 
 
    50% { background-color: #16dad0; } 
 
    75% { background-color: #d41a82; } 
 
    100% { background-color: #d41a82 } 
 
} 
 
@-moz-keyframes color_change { 
 
    0% { background-color: #da6e16; } 
 
    25% { background-color: #82da16; } 
 
    50% { background-color: #16dad0; } 
 
    75% { background-color: #d41a82; } 
 
    100% { background-color: #d41a82 } 
 
} 
 
@-ms-keyframes color_change { 
 
    0% { background-color: #da6e16; } 
 
    25% { background-color: #82da16; } 
 
    50% { background-color: #16dad0; } 
 
    75% { background-color: #d41a82; } 
 
    100% { background-color: #d41a82 } 
 
} 
 
@-o-keyframes color_change { 
 
    0% { background-color: #da6e16; } 
 
    25% { background-color: #82da16; } 
 
    50% { background-color: #16dad0; } 
 
    75% { background-color: #d41a82; } 
 
    100% { background-color: #d41a82 } 
 
} 
 
@keyframes color_change { 
 
    0% { background-color: #da6e16; } 
 
    25% { background-color: #82da16; } 
 
    50% { background-color: #16dad0; } 
 
    75% { background-color: #d41a82; } 
 
    100% { background-color: #d41a82 } 
 
}

<!-- HTML --> 
 
<button class="modal_button color">ddd</button>

Answer 1

下面是改變字體顏色和邊框顏色的版本，而不是背景。

/* CSS */ 
 
.modal_button { 
 
    min-height: 2em; 
 
    width: 5em; 
 
    background-color: white; 
 
    border: 2px solid #f35626; 
 
    color: #f35626; 
 
    cursor: pointer; 
 
    font-size: 2em; 
 
line-height: 2em; 
 
    -webkit-transition: color .4s; 
 
    -o-transition: color .4s; 
 
    transition: color .4s; 
 
    -webkit-animation: hue 60s linear; 
 
    -o-animation: hue 60s linear; 
 
    animation: hue 60s linear; 
 
    text-align: center; 
 
} 
 
.color { 
 
    animation-name: color_change; 
 
    animation-duration: 10s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
} 
 
@-webkit-keyframes color_change { 
 
    0% { color: #da6e16; border: 2px solid #da6e16; } 
 
    25% { color: #82da16; border: 2px solid #82da16; } 
 
    50% { color: #16dad0; border: 2px solid #16dad0; } 
 
    75% { color: #d41a82; border: 2px solid #d41a82; } 
 
    100% { color: #d41a82; border: 2px solid #d41a82; } 
 
} 
 
@-moz-keyframes color_change { 
 
    0% { color: #da6e16; border: 2px solid #da6e16; } 
 
    25% { color: #82da16; border: 2px solid #82da16; } 
 
    50% { color: #16dad0; border: 2px solid #16dad0; } 
 
    75% { color: #d41a82; border: 2px solid #d41a82; } 
 
    100% { color: #d41a82; border: 2px solid #d41a82; } 
 
} 
 
@-ms-keyframes color_change { 
 
    0% { color: #da6e16; border: 2px solid #da6e16; } 
 
    25% { color: #82da16; border: 2px solid #82da16; } 
 
    50% { color: #16dad0; border: 2px solid #16dad0; } 
 
    75% { color: #d41a82; border: 2px solid #d41a82; } 
 
    100% { color: #d41a82; border: 2px solid #d41a82; } 
 
} 
 
@-o-keyframes color_change { 
 
    0% { color: #da6e16; border: 2px solid #da6e16; } 
 
    25% { color: #82da16; border: 2px solid #82da16; } 
 
    50% { color: #16dad0; border: 2px solid #16dad0; } 
 
    75% { color: #d41a82; border: 2px solid #d41a82; } 
 
    100% { color: #d41a82; border: 2px solid #d41a82; } 
 
} 
 
@keyframes color_change { 
 
    0% { color: #da6e16; border: 2px solid #da6e16; } 
 
    25% { color: #82da16; border: 2px solid #82da16; } 
 
    50% { color: #16dad0; border: 2px solid #16dad0; } 
 
    75% { color: #d41a82; border: 2px solid #d41a82; } 
 
    100% { color: #d41a82; border: 2px solid #d41a82; } 
 
}

<button class="modal_button color">Button</button>

Answer 2

有類名稱類型的錯誤：modal_button

在CSS中：modal__button

只要改變它，它做工精細。

/* CSS */ 
 

 
.modal__button { 
 
    -webkit-animation: hue 60s linear; 
 
    -o-animation: hue 60s linear; 
 
    animation: hue 60s linear; 
 
    background-color: transparent; 
 
    border: 2px solid #f35626; 
 
    color: #f35626; 
 
    cursor: pointer; 
 
    font-size: 15px; 
 
    outline: none; 
 
    padding: 7px 22px; 
 
    -webkit-transition: background-color .4s, color .4s; 
 
    -o-transition: background-color .4s, color .4s; 
 
    transition: background-color .4s, color .4s; 
 
} 
 
.color { 
 
    animation-name: color_change; 
 
    animation-duration: 10s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
} 
 
@-webkit-keyframes color_change { 
 
    0% { background-color: #da6e16; } 
 
    25% { background-color: #82da16; } 
 
    50% { background-color: #16dad0; } 
 
    75% { background-color: #d41a82; } 
 
    100% { background-color: #d41a82 } 
 
} 
 
@-moz-keyframes color_change { 
 
    0% { background-color: #da6e16; } 
 
    25% { background-color: #82da16; } 
 
    50% { background-color: #16dad0; } 
 
    75% { background-color: #d41a82; } 
 
    100% { background-color: #d41a82 } 
 
} 
 
@-ms-keyframes color_change { 
 
    0% { background-color: #da6e16; } 
 
    25% { background-color: #82da16; } 
 
    50% { background-color: #16dad0; } 
 
    75% { background-color: #d41a82; } 
 
    100% { background-color: #d41a82 } 
 
} 
 
@-o-keyframes color_change { 
 
    0% { background-color: #da6e16; } 
 
    25% { background-color: #82da16; } 
 
    50% { background-color: #16dad0; } 
 
    75% { background-color: #d41a82; } 
 
    100% { background-color: #d41a82 } 
 
} 
 
@keyframes color_change { 
 
    0% { background-color: #da6e16; } 
 
    25% { background-color: #82da16; } 
 
    50% { background-color: #16dad0; } 
 
    75% { background-color: #d41a82; } 
 
    100% { background-color: #d41a82 } 
 
}

<!-- HTML --> 
 
<button class="modal__button color">ddd</button>

對於更改文本顏色和按鈕邊框：

.modal__button { 
 
    -webkit-animation: hue 60s linear; 
 
    -o-animation: hue 60s linear; 
 
    animation: hue 60s linear; 
 
    background-color: transparent; 
 
    border: 2px solid #f35626; 
 
    color: #f35626; 
 
    cursor: pointer; 
 
    font-size: 15px; 
 
    outline: none; 
 
    padding: 7px 22px; 
 
    -webkit-transition: background-color .4s, color .4s; 
 
    -o-transition: background-color .4s, color .4s; 
 
    transition: background-color .4s, color .4s; 
 
} 
 
.color { 
 
    animation-name: color_change; 
 
    animation-duration: 10s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
} 
 
@-webkit-keyframes color_change { 
 
    0% {color: #da6e16; border-color: #da6e16; } 
 
    25% { color: #82da16; border-color: #82da16; } 
 
    50% {color: #16dad0; border-color: #16dad0; } 
 
    75% {color: #d41a82; border-color: #d41a82; } 
 
    100% {color: #d41a82 border-color: #d41a82;} 
 
} 
 
@-moz-keyframes color_change { 
 
0% { color: #da6e16; border-color: #da6e16;} 
 
    25% { color: #82da16; border-color: #82da16;} 
 
    50% { color: #16dad0; border-color: #16dad0;} 
 
    75% { color: #d41a82; border-color: #d41a82;} 
 
    100% { color: #d41a82 border-color: #d41a82;} 
 
} 
 
@-ms-keyframes color_change { 
 
    0% { color: #da6e16; border-color: #da6e16;} 
 
    25% { color: #82da16; border-color: #82da16;} 
 
    50% { color: #16dad0; border-color: #16dad0;} 
 
    75% { color: #d41a82; border-color: #d41a82;} 
 
    100% { color: #d41a82 border-color: #d41a82;} 
 
} 
 
@-o-keyframes color_change { 
 
    0% { color: #da6e16; border-color: #da6e16;} 
 
    25% { color: #82da16; border-color: #82da16;} 
 
    50% { color: #16dad0; border-color: #16dad0;} 
 
    75% { color: #d41a82; border-color: #d41a82;} 
 
    100% { color: #d41a82 border-color: #d41a82;} 
 
} 
 
@keyframes color_change { 
 
    0% { color: #da6e16; border-color: #da6e16;} 
 
    25% { color: #82da16; border-color: #82da16;} 
 
    50% { color: #16dad0; border-color: #16dad0;} 
 
    75% { color: #d41a82; border-color: #d41a82;} 
 
    100% { color: #d41a82 border-color: #d41a82;} 
 
}

<button class="modal__button color">Button Text</button>