最終更新日 2021年6月22日

animation-nameプロパティ

animation-nameは、適用するアニメーションの名前を指定するプロパティです。

値に指定する名前は、@keyframesで設定したアニメーションIDと同じものです。カンマで区切って複数のアニメーションIDを指定できます。アニメーション名の代わりに「none」を指定した場合、アニメーションは適用されません。

アニメーション関連のプロパティをまとめて指定する場合は、animationを使用します。

CSS3での変更点

・animation-nameは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
none	ブロックレベル要素、インラインレベル要素	なし

値	説明
none	アニメーションは適用されません。（初期値）
アニメーション名	@keyframesで設定したアニメーションIDを指定します。カンマで区切って複数のアニメーションIDを指定可能です。

サンプルコード

animation-name: none;
animation-name: anime1;
animation-name: anime1, anime2;

参考文献：CSS Animations

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。