CSSのanimation-nameプロパティの使い方を徹底解説
animation-nameプロパティとは
animation-nameプロパティは、@keyframesルールで定義したアニメーションをHTML要素に紐付けるためのCSSプロパティです。このプロパティにキーフレームの名前を指定することで、対象の要素に対してそのアニメーションが適用されます。
なお、アニメーションを実際に動作させるには、animation-duration(再生時間)の指定も必要です。durationが設定されていない場合、デフォルト値の0秒となるため、アニメーションは実行されません。
基本構文と指定できる値
animation-name: none | キーフレーム名;
- none: アニメーションを適用しません(初期値)。
- キーフレーム名:
@keyframesで定義したアニメーションの名前を指定します。
実装例
以下のコードでは、myanimという名前のキーフレームアニメーションを定義し、div要素にanimation-nameプロパティで適用しています。背景色が緑から青へと3秒かけて変化するアニメーションです。また、animation-delay: 3s;により、ページ読み込みから3秒後にアニメーションが開始されます。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
background-color: yellow;
animation-name: myanim;
animation-duration: 3s;
animation-delay: 3s;
}
@keyframes myanim {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
ポイントまとめ
animation-nameは@keyframesで定義した名前と一致させる必要があります。- 複数のアニメーションを適用したい場合は、カンマ区切りで複数の名前を指定できます。
- アニメーションの速度や繰り返し回数などは、
animation-durationやanimation-iteration-countなどの関連プロパティで細かく制御できます。
-
CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法
writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し
-
CSSのpointer-eventsプロパティとは？使い方をコード例で解説
pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります