私のボタンの色を変える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>
は、背景の色ではなく、境界線を変更するには、「color_change」機能をリファクタリングしてください:白の上に設定され、透明な背景を持つスパンを使用しますホバー、または '逆の場合' ... –
私はこれを試してみるが、これはそれを行う最良の方法かもしれないようだ。 – Schro
はい、これは唯一の方法です:提案した他のメンバーの回答と同様に、スパンまたはダブル要素を使用してください。@Kieran McClungデモをご覧ください。 –