# cssアニメーションを複数使用するにはどうしたら良いですか?

**URL:** <https://forum.onecomme.com/t/topic/175>\
**Category:** 質問\
**Created:** [2022 年 4 月 26 日午前 3:47 UTC](https://forum.onecomme.com/t/topic/175 "2022-04-26T03:47:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mgank3](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/mgank3/32/209_2.png) [@mgank3](https://forum.onecomme.com/u/mgank3)\
**Post date:** [2022 年 4 月 26 日午前 3:47 UTC](https://forum.onecomme.com/t/topic/175/1 "2022-04-26T03:47:29Z")

</div>

ふわふわアニメーションとコメントのフェードアウト 2つのアニメーション同時使用は可能でしょうか?

@keyframes fuwa{  
0%,100% { transform:translateY( 0px ); }  
50% { transform:translateY( 5px ); }  
}.comment { animation: 3s fuwa infinite; }

@keyframes timerout{  
100% { transform:translateX( 200% ); opacity: 0;}  
}.comment { animation: 0.1s ease 5s timerout forwards; }

対象: わんコメ  
表示画面: OBS  
利用OS: Windows  
利用バージョン: わんコメ  
過去ログ確認: した  
ドキュメント確認（ [Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.](https://onecomme.notion.site/d04d95b33a03419c8924dad00f550006) ）: した

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2022 年 4 月 26 日午前 5:11 UTC](https://forum.onecomme.com/t/topic/175/2 "2022-04-26T05:11:29Z")

</div>

毎度ご質問ありがとうございます ！  
件の複数使用に関しまては、ちょっと **一筋縄にはいかない** ようです。

* * *

まず、複数指定する方法はちゃんとあります。  
ですが実情としましては、複数指定ができたとしても、  
アニメーション同士で邪魔し合って、  
多くの場合はうまく動かないことが多いものと思われます。

こういった問題を解決するためには、  
若干の知識とクリエイティブなところが必要になってきますので、

（中略）

ですので「CSSアニメーションを同じところに複数使いたい」というのは、  
自己解決するにはちょっと敷居は高めになるかと思われます。  
つきましては（難しそうな場合は）  
「詳しい方に複数アニメーションのミックスをご依頼・ご相談いただく」  
といった解決方法を取られるのがベターかなと。

その上で、今回の場合は、

```auto
@keyframes timerout{
  100% { margin-left:-100%; opacity: 0;}
}
@keyframes fuwa{
  0%,100% { transform:translateY( 0px ); }
  50% { transform:translateY( 5px ); }
}
.comment {
  animation:
    1s ease 3s timerout forwards,
    3s fuwa infinite;
}

```

という風な記述で解決できるのではないかと思われます。  
※後学のために、特筆事項としましては、  
`.comment`での指定を一括にして、アニメーションを複数指定している点と、  
` transform:translateY`というパラメーターが重複して取り合いになっていたので  
片方を`margin-left`というパラメーターで代替しました。

* * *

以上、よろしくお願いします！

> **蛇足**
>
> なお、カスタマイズの相談をされる際には、トピックを立てるときのカテゴリを「カスタマイズ」にしていただけますと、マッチング的な観点からより分かりやすくなると思いますのでご活用いただけましたら 🐾