hover時に背景画変化するアニメーションを実装

質問

hover時に背景画変化するアニメーションを実装したいのですがうまくいきません。

１
.animation-back-color {
background: var(--color-secondly--gradient);
animation: animation-back-color 8s infinite alternate!important;
}

.animation-back-color:hover {
background-color: #FF7C7C;
}

２
.animation-back-color {
background: var(--color-secondly--gradient);
animation: animation-back-color 4s infinite alternate!important;
}

@keyframes animation-back-color:hover {
0% { background-color: #FF7C7C; }
50% { background-color: #FFFF6B; }
100% { background-color: #FF9C6C; }
}

上記両方ともうまくいきません。

またマルチクラスでホバー前の背景色が別クラスで指定してある場合、hoverは成功しないと考えてよいでしょうか？
そのあたりは融通がきかず、hover前の色とと後の色クラス名は同じクラス名出ないと、同じ要素に別クラスがあり、
そこに始まりの色味があるという事は仕様上不可でしょうか？

回答No.2

Proof4 · ベストアンサー

No.1のコメントに対して回答します。

hover時に通常時つけているアニメーションをクリアしてあげるとちゃんと動くと思います。

.animation-back-color:hover{
　background-color: #FF7C7C;
　animation: none;
}

お礼

１
.animation-back-color {
background: var(--color-secondly--gradient);
animation: animation-back-color 8s infinite alternate!important;
}

.animation-back-color:hover {
background-color: #FF7C7C;
}

の件でしょうか？

つまりアニメーションしているボタンの色をホバー時に代えたいならアニメーションをhover時に止めてかつ色を代えないとうまくいかないという事で良いでしょうか？

2のアニメーション~別のアニメーションへというやり方は不可能なのですかね。・

回答No.3

Proof4

No.1の補足コメント、およびNo.2のお礼コメントに対して回答します。

No.1の補足コメント>>
グラデーション背景をhover時にtransitionでアニメーションさせることはできません。
どのようなアニメーションをしたいかに拠りますが、background-sizeを大きめに設定して位置をずらす、透明度を変化させる等であれば可能です。

No.2のお礼コメント>>
>つまりアニメーションしているボタンの色をホバー時に代えたいならアニメーションをhover時に止めてかつ色を代えないとうまくいかないという事で良いでしょうか？

そうです。

>2のアニメーション~別のアニメーションへというやり方は不可能なのですかね。

そのような動作をさせたいならhover時のanimationにnoneではなくアニメーション名などを設定すれことで可能です。

お礼

やはりうまくいきませんでした。

回答No.1

Proof4

下記で可能です。hoverをつけるのはkeyframesではなくクラス名の方です。

.animation-back-color:hover{
　background-color: var(--color-secondly--gradient);
　animation: animation-back-color 4s infinite alternate;
}

@keyframes animation-back-color{
　0% { background-color: #FF7C7C; }
　50% { background-color: #FFFF6B; }
　100% { background-color: #FF9C6C; }
}

またマルチクラスでホバー前の背景色が別クラスで指定してあってもhoverは成功します。hover前の色と後の色は別のクラス名であっても指定することができるため、そこに始まりの色味があることも仕様上可能です。

お礼

情報不足ですいません。おっしゃる通り始めのソースであれば可能なのですが、実は通常の状態に下記のアニメーションがついており、これが原因の可能性が高いです、
このような場合、アニメーションがついているボタンに色を変えるhover効果を付けることは不可能なのでしょうか？

.animation-color {
animation: animation-color 1s infinite alternate;
}

@keyframes animation-color {
0% { background-color: #FF7C; }
50% { background-color: #FF6B; }
100% { background-color: #FC6C; }
}

補足

アニメーションの方は別途考えている最中ですが、アニメーションでないグラデーションのホバージの変化もうまくいきません。

.p-gradient-back-color {
background: var(--color--gradient);
/* 1秒かけて背景色をアニメーションさせる */
transition: all 15s;

}

.p-gradient-back-color:hover {
background: var(--color--gradient2);

}

のようにしたのですが、もしかしてグラデーションの場合hoverで変化させることは出来るものの数秒かけてゆっくり変化させることは不可能なのでしょうか？