CSS

The CSS `animation-name` property specifies the name of the animation to be applied to an element, and this name must match the `@keyframes` rule defined in the same CSS file.

animation-name

　CSSの animation-nameプロパティは、要素に適用するアニメーションの名前を指定するためのプロパティです。この名前は、同じCSSファイル内で定義された @keyframesルールと一致する必要があります。

基本構文

.element {
	animation-name: animationName;
}

@keyframesルールとの関係

　animation-nameプロパティで指定された名前は、アニメーションの段階ごとのスタイルを定義する @keyframesルールで使われます。

/* アニメーションの定義 */
@keyframes slidein {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(100%);
	}
}

/* アニメーションの適用 */
.element {
	animation-name: slidein;
	animation-duration: 2s; /* アニメーションの持続時間を2秒に設定 */
}

　この例では、.elementクラスに対して slidein という名前のアニメーションが適用されます。@keyframes slideinで定義されたアニメーションは、translateXプロパティを使って要素を左から右へ移動させるものです。

Sample

　50px*50pxのボックスが左から右に繰り返し動くように設定した HTMLと CSSのサンプルコードです。

<div class="box"></div>

.box {
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-name: moveRight;
	animation-timing-function: linear;
	background-color: darkcyan;
	height: 50px;
	position: absolute;
	width: 50px;
}

@keyframes moveRight {
	from {
		left: 0;
	}
	to {
		left: 100%;
	}
}

　このサンプルコードでは、.boxクラスの要素が moveRight というアニメーションを適用され、左から右に2秒間で移動し、無限に繰り返します。@keyframes moveRightでアニメーションの動きを定義しています。