ボタンアウトラインで色を変更するアニメーションを作成するにはどうすればいいですか？

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

型エラーがクラス名であります：CSSでmodal_button

：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>