cssにて、animationでスライドインした要素にhoverで別animationを使用したい

Question

前提・実現したいこと

cssにて、animationでスライドインした要素にhoverで別animationを使用したいです

発生している問題・エラーメッセージ

hoverのanimationでもスライドインしたものと同じanimationになってしまいます

該当のソースコード

<div class="circle">
    <div class="circle_pink"></div>
    <div class="circle_white" ></div>
    <div class="circle_green"></div>
</div>

/* スライドインアニメーション */
.circle > div {
  opacity: 0;
}
.circle_pink {
  animation: dango 1.6s 0.6s forwards;
}
.circle_white {
  animation: dango 1.9s 0.3s forwards;
}
.circle_green {
  animation: dango 2.2s 0s forwards;
}

@keyframes dango {
  0% {
    opacity: 1;
    transform: translate(-500%, 0%);
    -webkit-transform: translate(-500%, 0%);
    -ms-transform: translate(-500%, 0%);
    width: 230px;
  }
  45% {
    opacity:1;
    transform: translate(0%, 0%);
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    width: 230px;
  }
  65% {
    opacity:1;
    transform: translate(-5%, 0%);
    -webkit-transform: translate(-5%, 0%);
    -ms-transform: translate(-5%, 0%);
    width: 220px;
  }   
  75% {
    opacity:1;
    transform: translate(-4%, 0%);
    -webkit-transform: translate(-4%, 0%);
    -ms-transform: translate(-4%, 0%);
    width: 225px;
  }  
  100% {
  opacity:1;
  transform: translate(0%, 0%);
  -webkit-transform: translate(0%, 0%);
  -ms-transform: translate(0%, 0%);
  } 
}

/*ホバーアニメーション*/
.circle > div:hover {
  animation: dango2 0.8s 0s forwards;
}
@keyframes dango2 {
  0% {
  width: 215px;
  height: 215px;
  }
  40% {
    width: 242px;
    height: 242px;
  }
  65% {
    width: 222px;
    height: 222px;
  }
  100% {
    width: 230px;
    height: 230px;
  } 
}

補足情報

不可能な場合も教えて頂けると嬉しいです。
不足事項などあれば追加で記入します。
よろしくお願いします。

Comments

[yambejp]

とりあえずスライドインされることが確認できるソースをどこかにアップしてください
hover時に想定している動作の説明もお願いします

[3owK]

質問いただき、ありがとうございます。
今回は解決したので、次回質問時の参考にさせていただきます！
ありがとうございました！！

Answer 1

animation を上書きしているのが原因なので、複数アニメーションの定義をするのがいいと思います。
サンプルを置いておきます。

https://jsfiddle.net/Lhankor_Mhy/7as8jL1u/

/* 
.circle > div:hover {
  animation: dango2 0.8s 0s forwards;
}
*/

.circle_pink:hover {
  animation: dango 1.6s 0.6s forwards, dango2 0.8s 0s forwards;
}
.circle_white:hover {
  animation: dango 1.9s 0.3s forwards, dango2 0.8s 0s forwards;
}
.circle_green:hover {
  animation: dango 2.2s 0s forwards, dango2 0.8s 0s forwards;
}

Comments

[3owK]

出来ました！！！
想像していた動作になりました！ありがとうございます！
1つ質問があります、上書きにならないように複数記述になるのは分かったのですが、dangoとdango2が同時に行われないのは何故なのでしょうか？

[Lhankor_Mhy]

回答にも書きましたが、アニメーションが上書きされているのが原因です。
CSSアニメーションが動くのは、大雑把に言うと、ページがロードされた時とanimationプロパティの設定が変わった時です。

.circle_pink {
animation: dango 1.6s 0.6s forwards;
}

がホバーすることによって、

.circle > div:hover {
animation: dango2 0.8s 0s forwards;
}

に変わるため、dango のアニメーションが解除されます。

逆に

.circle > div:hover {
animation: dango2 0.8s 0s forwards;
}

のホバーが外れることによって、

.circle_pink {
animation: dango 1.6s 0.6s forwards;
}

等に変わるため、dango2 のアニメーションが解除され、dango のアニメーションが再開されます。

---

複数のアニメーションを定義しておけばアニメーションの上書きが起こらない（同じ値を設定している）ので、animation-fill-mode: forwards の設定も維持され、dango のアニメーションも再開されないというわけです。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values

[3owK]

なるほど！
分かりやすい説明ありがとうございました！