目次
はじめに
CSSのanimationプロパティは、要素に対してアニメーション効果を与えるために使用されます。
以下で、animationプロパティの一般的な構文と一部のサブプロパティについて説明します。
animationプロパティの指定の順番を忘れてしまうため、備忘録的な意味でも今回の記事を更新をしようと思いました。
animationプロパティの指定の仕方・順番
animationプロパティの指定の仕方・順番は次の通りです。
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
animationプロパティのcssの例
.element {
width: 100px;
height: 100px;
background-color: #333;
/* まとめてanimationプロパティを指定 */
animation: slide 3s ease-in-out 1s infinite alternate both running;
}
.element {
width: 100px;
height: 100px;
background-color: red;
/* animationプロパティを別々に指定 */
animation-name: slide;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
animation-play-state: running;
}
@keyframes slide {
from {
transform: translateX(0);
background-color: red;
}
to {
transform: translateX(200px);
background-color: blue;
}
}animationプロパティのcssの例のデモ
PR
animationプロパティの各サブプロパティの説明
animation-name
アニメーションの名前。@keyframesで定義されたアニメーションの名前を指定します。
animation-duration
アニメーションの1サイクルの時間を指定します。単位は秒（s）またはミリ秒（ms）です。デフォルト「0s」（アニメーションなし）
1sを指定
3sを指定
5sを指定
上記のデモは「animationプロパティのcssの例」のanimation-durationだけ変更しています。
animation-timing-function
アニメーションの進行速度を指定します。一般的な値には ease, linear, ease-in, ease-out, ease-in-out などがあります。デフォルト「ease」
easeを指定
linearを指定
ease-inを指定
ease-outを指定
ease-in-outを指定
上記のデモは「animationプロパティのcssの例」のheightとanimation-timing-functionを変更しています。
animation-delay
アニメーションの開始までの遅延時間を指定します。単位は秒（s）またはミリ秒（ms）です。デフォルト「0s」（遅延なし）
animation-iteration-count
アニメーションの繰り返し回数を指定します。無限に繰り返す場合は infinite を指定します。デフォルト「1」（繰り返しなし）
animation-direction
アニメーションの方向を指定します。normal（通常）、reverse（逆）、alternate（交互）などがあります。デフォルト（normal）
normalを指定
reverseを指定
alternateを指定
animation-fill-mode
アニメーションの最初と最後のスタイルを指定します。forwards、backwards、bothがあります。
bothを指定するとanimation-delayの間は@keyframesのfrom（0%）の表示、アニメーションが終了すると@keyframesのto（100%）の表示になります。
animation-iteration-countにinfiniteを指定すると、それぞれの違いがわからなくなるので、下記デモを確認する頃にはアニメーションが終了していると思います。最初の状態を確認したい場合はページを一度読み込んでください。
forwardsを指定
backwardsを指定
bothを指定
animation-play-state
アニメーションの実行または停止を指定します。running（実行）、paused（停止）があります。デフォルト「running」
animationプロパティで作成したものを紹介している記事
ボタンレイアウト
LPなどで使用されるお申し込みボタンを、キラッと光が右に流れ、上下に揺れるアニメーションで実装をし、レイアウトとソースコードを紹介しています。
ボタンレイアウト
LPなどで使用される購入を促すボタンを、上下にぷるぷる揺れるアニメーションで実装しました。レイアウトとソースコードも紹介しています。
他の忘れやすいCSSプロパティ
backgroundCSS
いつも忘れるcssのbackgroundプロパティの指定の仕方・順番について記事にしています。
