2017-01-03 20 views
-1

私のボタンの色を変えるCSSアニメーションがあります。私はそれを上に置いたときにそれをしっかりとすることにしました。コードは機能し、色は変わりますが、その上にカーソルを置くたびにアニメーションがリセットされます。ホバー状態のカラーアニメーションを、アクションの前の非ホバー状態と同じ色にする方法があります(非ホバーが緑色の場合は、ホバーオーバー時にはまだ緑色です)。私は、これは二重のボタンを通じて何ができるかと思いますCSSアニメーションを同期させる

http://codepen.io/Dingerzat/pen/mRdObJ

/* CSS */ 
 

 
.enquire_button { 
 
    min-height: 2em; 
 
    width: 7em; 
 
    background-color: white; 
 
    border: 4px solid #f35626; 
 
    border-radius: 5px; 
 
    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; 
 
} 
 
.enquire_button:hover { 
 
    background-color: #f35626; 
 
    color: #ffffff; 
 
    -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; 
 
} 
 
.color_button { 
 
    animation-name: color_change; 
 
    animation-duration: 10s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
} 
 
.color_button:hover { 
 
    animation-name: color_change2; 
 
    animation-duration: 10s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
} 
 
@-webkit-keyframes color_change { 
 
    0% { 
 
    color: #da6e16; 
 
    border: 4px solid #da6e16; 
 
    } 
 
    25% { 
 
    color: #82da16; 
 
    border: 4px solid #82da16; 
 
    } 
 
    50% { 
 
    color: #16dad0; 
 
    border: 4px solid #16dad0; 
 
    } 
 
    75% { 
 
    color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
    100% { 
 
    color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
} 
 
@-moz-keyframes color_change { 
 
    0% { 
 
    color: #da6e16; 
 
    border: 4px solid #da6e16; 
 
    } 
 
    25% { 
 
    color: #82da16; 
 
    border: 4px solid #82da16; 
 
    } 
 
    50% { 
 
    color: #16dad0; 
 
    border: 4px solid #16dad0; 
 
    } 
 
    75% { 
 
    color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
    100% { 
 
    color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
} 
 
@-ms-keyframes color_change { 
 
    0% { 
 
    color: #da6e16; 
 
    border: 4px solid #da6e16; 
 
    } 
 
    25% { 
 
    color: #82da16; 
 
    border: 4px solid #82da16; 
 
    } 
 
    50% { 
 
    color: #16dad0; 
 
    border: 4px solid #16dad0; 
 
    } 
 
    75% { 
 
    color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
    100% { 
 
    color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
} 
 
@-o-keyframes color_change { 
 
    0% { 
 
    color: #da6e16; 
 
    border: 4px solid #da6e16; 
 
    } 
 
    25% { 
 
    color: #82da16; 
 
    border: 4px solid #82da16; 
 
    } 
 
    50% { 
 
    color: #16dad0; 
 
    border: 4px solid #16dad0; 
 
    } 
 
    75% { 
 
    color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
    100% { 
 
    color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
} 
 
@keyframes color_change { 
 
    0% { 
 
    color: #da6e16; 
 
    border: 4px solid #da6e16; 
 
    } 
 
    25% { 
 
    color: #82da16; 
 
    border: 4px solid #82da16; 
 
    } 
 
    50% { 
 
    color: #16dad0; 
 
    border: 4px solid #16dad0; 
 
    } 
 
    75% { 
 
    color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
    100% { 
 
    color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
} 
 
@-webkit-keyframes color_change2 { 
 
    0% { 
 
    color: #ffffff; 
 
    background-color: #da6e16; 
 
    border: 4px solid #da6e16; 
 
    } 
 
    25% { 
 
    color: #ffffff; 
 
    background-color: #82da16; 
 
    border: 4px solid #82da16; 
 
    } 
 
    50% { 
 
    color: #ffffff; 
 
    background-color: #16dad0; 
 
    border: 4px solid #16dad0; 
 
    } 
 
    75% { 
 
    color: #ffffff; 
 
    background-color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
    100% { 
 
    color: #ffffff; 
 
    background-color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
} 
 
@-moz-keyframes color_change2 { 
 
    0% { 
 
    color: #ffffff; 
 
    background-color: #da6e16; 
 
    border: 4px solid #da6e16; 
 
    } 
 
    25% { 
 
    color: #ffffff; 
 
    background-color: #82da16; 
 
    border: 4px solid #82da16; 
 
    } 
 
    50% { 
 
    color: #ffffff; 
 
    background-color: #16dad0; 
 
    border: 4px solid #16dad0; 
 
    } 
 
    75% { 
 
    color: #ffffff; 
 
    background-color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
    100% { 
 
    color: #ffffff; 
 
    background-color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
} 
 
@-ms-keyframes color_change2 { 
 
    0% { 
 
    color: #ffffff; 
 
    background-color: #da6e16; 
 
    border: 4px solid #da6e16; 
 
    } 
 
    25% { 
 
    color: #ffffff; 
 
    background-color: #82da16; 
 
    border: 4px solid #82da16; 
 
    } 
 
    50% { 
 
    color: #ffffff; 
 
    background-color: #16dad0; 
 
    border: 4px solid #16dad0; 
 
    } 
 
    75% { 
 
    color: #ffffff; 
 
    background-color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
    100% { 
 
    color: #ffffff; 
 
    background-color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
} 
 
@-o-keyframes color_change2 { 
 
    0% { 
 
    color: #ffffff; 
 
    background-color: #da6e16; 
 
    border: 4px solid #da6e16; 
 
    } 
 
    25% { 
 
    color: #ffffff; 
 
    background-color: #82da16; 
 
    border: 4px solid #82da16; 
 
    } 
 
    50% { 
 
    color: #ffffff; 
 
    background-color: #16dad0; 
 
    border: 4px solid #16dad0; 
 
    } 
 
    75% { 
 
    color: #ffffff; 
 
    background-color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
    100% { 
 
    color: #ffffff; 
 
    background-color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
} 
 
@keyframes color_change2 { 
 
    0% { 
 
    color: #ffffff; 
 
    background-color: #da6e16; 
 
    border: 4px solid #da6e16; 
 
    } 
 
    25% { 
 
    color: #ffffff; 
 
    background-color: #82da16; 
 
    border: 4px solid #82da16; 
 
    } 
 
    50% { 
 
    color: #ffffff; 
 
    background-color: #16dad0; 
 
    border: 4px solid #16dad0; 
 
    } 
 
    75% { 
 
    color: #ffffff; 
 
    background-color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
    100% { 
 
    color: #ffffff; 
 
    background-color: #d41a82; 
 
    border: 4px solid #d41a82; 
 
    } 
 
}
<button class="enquire_button color_button">Click here</button>

+1

は、背景の色ではなく、境界線を変更するには、「color_change」機能をリファクタリングしてください:白の上に設定され、透明な背景を持つスパンを使用しますホバー、または '逆の場合' ... –

+0

私はこれを試してみるが、これはそれを行う最良の方法かもしれないようだ。 – Schro

+0

はい、これは唯一の方法です:提案した他のメンバーの回答と同様に、スパンまたはダブル要素を使用してください。@Kieran McClungデモをご覧ください。 –

答えて

3

私は、これはあなたが達成しようとしているものだと思う、それはしかし、余分なマークアップが必要です。私はあなたのコードをできるだけ元に戻そうとしましたが、この例ではコードを取り除いています。完全な要求コードはcodepenに添付されています。

HTML

<button class="enquire_button color_button"> 
    <span class="button_text">Click here</span> 
</button> 

CSS

.enquire_button { 
    animation-direction: alternate; 
    animation-duration: 10s; 
    animation-iteration-count: infinite; 
    animation-name: color_change; 
    background-color: #fff; 
    border: 4px solid #f35626; 
    border-radius: 5px; 
    color: #f35626; 
    cursor: pointer; 
    font-size: 2em; 
    line-height: 2em; 
    min-height: 2em; 
    position: relative; 
    text-align: center; 
    transition: color .4s; 
    width: 7em; 
} 

.enquire_button:before { 
    background: #fff; 
    content: ''; 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    transition: background-color .4s; 
    width: 100%; 
} 

.enquire_button:hover .button_text { 
    color: #fff; 
} 

.enquire_button:hover:before { 
    background-color: transparent; 
} 

.button_text { 
    position: relative; 
} 

@keyframes color_change { 
    0% { 
    background-color: #da6e16; 
    color: #da6e16; 
    border: 4px solid #da6e16; 
    } 
    25% { 
    background-color: #82da16; 
    color: #82da16; 
    border: 4px solid #82da16; 
    } 
    50% { 
    background-color: #16dad0; 
    color: #16dad0; 
    border: 4px solid #16dad0; 
    } 
    75% { 
    background-color: #d41a82; 
    color: #d41a82; 
    border: 4px solid #d41a82; 
    } 
    100% { 
    background-color: #d41a82; 
    color: #d41a82; 
    border: 4px solid #d41a82; 
    } 
} 
+0

サンプルコードは完全に動作します。すべてのあなたの助けをありがとう! – Schro

1

))

<div class="btn"> 
    <button>Button #1</button> 
    <button>Button #2</button> 
</div> 

ボタン#1 - アニメーション無限。

ボタン#2 - 白い背景

.bnt button + button { 
    display: none; 
} 
関連する問題