最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。
今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。
ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。
animationとtransitionの違い
どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。
animation
- ループ可能
- keyframesで細かい設定が可能
- ウインドウ読み込んで即実行が可能
transition
- ループがない
- 自然に最初の状態に戻る
- hoverなどのキッカケを与えてあげないと動かない
JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。
それぞれを翻訳すると、animationはそのままアニメーション・静物が動いているように撮影すること。transitionは遷移・変化とありました。
animationを指定する。
まずはプロパティの種類です。
- animation-name 適用するキーフレームの名前
- animation-duration かかる時間
- animation-timing-function どのようなアニメーションするか
- animation-delay 何秒後に開始するか
- animation-iteration-count 繰り返す回数
- animation-direction 反転再生
- animation-fill-mode アニメーション実行前・実行後の状態
- animation-play-state アニメーションを一時停止・再生させる
- @keyframes 変化の指定
まとめて指定する場合 animation: name duration timing-function delay iteration-count direction fill-mode
（省略された値は初期値）
書き方例：
#box01 div {
animation-name: animation01;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-fill-mode: both;
/* animation: animation01 3s ease-in 1s both; （まとめて指定する場合）*/
}
@keyframes animation01 {
from {
left: 0;
}
20% {
left: 300px;
}
70% {
left: 300px;
background-color: #939;
}
to {
left: 600px;
background-color: #939;
}
}
animation-name
どの@keyframesを適用するか指定する。
animation-duration
アニメーション1回にかかる時間を指定する。
- 0s：初期値
- 1sなど
- 100msなど
animation-timing-function
どのようなアニメーションをするか指定をする。
- ease：初期値
- ease-in
- ease-out
- ease-in-out
- linear
などなど。それぞれの動き方は以下のサイトで説明されているので、ご覧になってみて下さい。
animation-delay
何秒後に開始するかを指定する。
- 0：初期値
- 1sなど
- 100msなど
animation-iteration-count
アニメーションを何回繰り返すか指定する。
- 1：初期値
- 1.5：小数点も可
- infinite：無限
animation-direction
アニメーションが終わった時に、反転アニメーションで最初の動作に戻るか指定する。
- normal：初期値・アニメーションが終わると初期位置に戻る
- alternate：逆方向も実行する
- reverse：毎回逆方向を実行する
- alternate-reverse：逆方向から実行して繰り返す
animation-fill-mode
アニメーションの実行前や実行後の状態の指定をする。
- none：初期値
- forwards
- backwards
- both
この値は「animation-direction」「animation-iteration-count」の値によって動作が変わるみたいなので、こちらのページをご参考ください。
animation-play-state
アニメーションを一時停止または再生の指定ができます。
- running：初期値、再生
- paused：一時停止
この値を参照することによって、現在のアニメーションの状態を取得できるそうです。いきなりpaused指定すると動きません。
transition
プロパティの種類は以下です。
- transition-property transitionするCSSプロパティ
- transition-duration かかる時間
- transition-timing-function どのように動くか
- transition-delay 何秒後に実行するか
まとめて指定する場合・transition: transition-property transition-duration transition-timing-function transition-delay;
書き方の例
#box03 div {
position: relative;
top: 0;
left: 0;
background: green;
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
transition-delay: 0;
/* transition: all 3s linear 0; （まとめて指定する場合）*/
}
#box03:hover div {
left: 600px;
}
transition-property
transitionをするCSSプロパティを指定します。
- all：初期値
- none：transitionしない
- name：個別にCSSセレクタを指定する
transition-duration
transition1回にかかる時間を指定する。
- 0s：初期値
- 1sなど
- 100msなど
transition-timing-function
どのようなtransitionをするか指定をする。
- ease：初期値
- ease-in
- ease-out
- ease-in-out
- linear
animation-timing-functionと同じです。
transition-delay
何秒後に開始するかを指定する。
- 0：初期値
- 1sなど
- 100msなど
というわけで、プロパティと基本的な使い方をおさらいしてみました。これを活かしていいサイト作りが出来ればなと思います。
コメント