最近CSSアニメーションを書くことが増えたのでまとめ。
1. animationプロパティ
animation関連のプロパティを一括で指定できるプロパティ。
最初は適当にこればかり使っていたが、指定できるプロパティが非常に多く、順番も自由。
animation-durationとanimation-delayの順番が決まっている等、正直難解なので個々を説明します。
下記に紹介する8つのプロパティを一括で指定できる。
1-1. animation-name
@keyframeで作成したアニメーション名を指定します。
初期値はnone。
noneはキーフレームが存在しないことを示す。
unset, initial, inheritはキーフレームの名前として利用できません。
複数指定することも可能です。
他の複数指定可能なプロパティも同様ですが、アニメーションを
複数指定した場合、１が終わったら２ではなく、それぞれのアニメーションが同時に実行されます。
.slidein {
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}1-2. animation-duration
1回のアニメーションの時間を指定します。
初期値は0s
単位はsかmsで、複数指定することも可能です。
(複数指定した場合の仕様は参考リンクを参照してください。)
.slidein {
animation-duration: 3s;
}1-3. animation-timing-function
アニメーションがどのような周期で進行するかを指定します。
指定できる値は様々な種類があるので、参考リンクを参照してください。
よく使いそうなものとして linear, ease[-in][-out]。
こだわりたい場合はcubic-bezierを使うと良さそうですが、二次元ベジエ曲線の知識が必要。
.slidein {
animation-timing-function: ease-in-out;
}1-4. animation-delay
アニメーションの開始をどれだけ遅らせるか、を指定します。
仕様は animation-duration と同様です。
.slidein {
animation-delay: 3s;
}1-5. animation-iteration-count
アニメーションを何度繰り返すか、を指定します。
無限に繰り返す場合はinfiniteを指定します。
負の数は無効ですが、小数点は有効で、0.5の場合は
アニメーションを半分まで再生します。
デフォルトは1です。
.slidein {
animation-iteration-count: infinite;
}1-6. animation-direction
アニメーション再生の向きを指定します。
指定できる値はnormal, reverse, alternate, alternate-reverseです。
デフォルトはnormalです。
normalはアニメーションを順方向に再生します。reverseはアニメーションを逆方向に再生します。alternateはアニメーションを順方向に再生し、終了後に逆方向に再生します。alternate-reverseはアニメーションを逆方向に再生し、終了後に順方向に再生します。
.slidein {
animation-direction: alternate;
}1-7. animation-fill-mode
アニメーションの実行の前後に要素のスタイルをどうするかを指定します。
デフォルトはnoneです。
noneはアニメーションの実行前後で要素のスタイルを変更しません。forwardsはアニメーションの終了時のスタイルを維持します。backwardsはアニメーションの開始時のスタイルを維持します。bothはアニメーションの開始時と終了時のスタイルを維持します。
.slidein {
animation-fill-mode: forwards;
}1-8. animation-play-state
アニメーションが実行中か停止中かを設定します。
一度停止したアニメーションを再開すると、停止した時点から再開します。
デフォルトはrunningです。
.slidein {
animation-play-state: paused | running;
}animation参考リンク
2. transitionプロパティ
指定した要素の２つの状態間の変化をアニメーションさせることができます。(通常から:horverやその逆)
こちらもanimationと同様に複数のプロパティを一括で指定できるプロパティです。
animationほど複雑ではありませんが、全項目書いていきます。
2-1. transition-property
変化させるプロパティを指定する。下記のサンプルコードではトランジション時にwidthを変化させることを示しています。
こちらも複数指定することが可能です。
.slidein {
transition-property: width;
}2-2. transition-duration
animation-durationと同様です。
```css
.slidein {
transition-duration: 3s;
}2-3. transition-timing-function
`animation-timing-function`と同様です。
.slidein {
transition-timing-function: ease-in-out;
}2-4. transition-delay
`animation-delay`と同様です。`
.slidein {
transition-delay: 3s;
}3. transformプロパティ
与えられた要素を回転、拡大縮小、傾斜、移動させることができます。
初期値は`none`です。
複数指定した場合、指定した順番に適用されますので、順番に注意してください。(参考リンク参照)
3-1. transform-origin
要素の変形の基準点を指定します。
デフォルトは```50% 50% 0```です。
Unityでいうところのpivotのようなものです。
.slidein {
# 左上を基準にする
transform-origin: 0 0;
# 右下を基準にする
transform-origin: 100% 100%;
}