animationプロパティを使うと以下のようなスライドショーのようなものが作れます
なんかマッチョな方がいっぱい！
トップページによくありがちなやつだね
最初はこれを作るのは少し難しいかもしれないけどアニメーションが理解できたらできるので頑張っていきましょう
1.transitionとanimationの違い
動かすといえばtransitionもそうだったけどanimationとは何が違うの？
ではまずtransitionとanimationの違いから見ていこう
1-1.始まるタイミング
ブラウザ読み込み後
:hoverあり
きっかけ(:hoverや:activeなど)がないと初めから移動や変形が終了しているためアニメーション感がない。
ブラウザ読み込み後2秒後に開始
:hoverあり
きっかけがあればもちろん無くても好きなタイミングで動かせる。
1-2.途中にスタイルを入れられるか
カーソルを乗せてください
入れられない
カーソルを乗せてください
細かく設定できる
1-3.再生回数
カーソルを乗せてください
一回切り
カーソルを乗せてください
設定している数(1~無限)
1-4.戻り方
カーソルを乗せてください
逆再生で戻る
カーソルを乗せてください
初期値に戻る
他にもJavaScriptを使わなくてもできるようになるのでページに負担がかからないなどのメリットもあります。
アニメーションというだけあって細かい設定もできるという事だね
簡単なアニメーションなら”transition”、複雑なアニメーションなら”animation”という感じでそれぞれの利点を見極めて使い分けていきましょう
2.アニメーションの作り方
アニメーションを作るには”@keyframes“とそれを呼び出す”animation-name“を準備します。
最初は以下のように簡単なアニメーションから作ってみましょう
カーソルを乗せてください
2-1.keyframesを作る
keyframesは開始から何パーセントの時点でどのようなアニメーションにするかを指定する事ができます。
基本的には0%を開始時、100%を終了時と考え、その間も細かく設定する事もできます。
@keyframes 名前{
〇〇%{
プロパティ名: 値;
}
}@から書き始める事に注意です。また名前にはclassやidのように好きな名前をつける事ができます。
- STEP1@keyframesの名前をつけ、枠組みを作成する
@keyframes translate{ }名前はお好きに付けられますが紛らわしかったり、わかりにくいのは避けましょう。
ここでは移動させるので”translate”としました - STEP2STEP1の時に作成した枠組みにタイミングを指定する
@keyframes translate{ 0%{ } 100%{ } }ここでは0%と100%を指定しました。
- STEP3それぞれのタイミングの{ }内に任意の動きを指定する
@keyframes translate{ 0%{ transform: translateX(0px); } 100%{ transform: translateX(230px); } }ここでは100%の時点でX軸方向に230px移動するようにしています。
ここからは補足情報になります
from to
また0%と100%の時は”from”, “to”というキーワードでも指定できます。
@keyframes translate2{
from{
transform: translateX(0px);
}
to{
transform: translateX(230px); /*100%の時点でX軸方向に230px移動する*/
}}カーソルを乗せてください
@keyframes translate{
0%{
transform: translateX(0px);
}
100%{
transform: translateX(230px); /*100%の時点でX軸方向に230px移動する*/
}
}終了時のみを指定
0%、つまり開始時の指定は省略することもできます。
@keyframes translate{
100%{
transform: translateX(230px); /*100%の時点でX軸方向に230px移動する*/
}
}カーソルを乗せてください
2-2.animation-name
animation-nameプロパティは”@keyframes”で付けた名前を指定することでアニメーションを呼び出せるようにするプロパティです。
セレクター{
animation-name: @keyframeで付けた名前;
}指定を忘れるとアニメーションが動かないので注意です。
またこの”@keyframes”の名前は使い回すこともできます。
animation-nameプロパティに関してはこれだけです
書き忘れだけには気を付けるくらいです
これでアニメーションができたの？
あとはanimationプロパティでいろいろと細かく指定していくだけだよ
3.もっと細かく設定する
先ほどのものですとtransitionとあまり変わりがないので”keyframes”をもう少し細かく設定します。
カーソルを乗せてください
60%の地点にもイベントを追加しました。
/*keyframesの設定*/
@keyframes example{
0%{
transform: none;
}
60%{
transform: translateX(200px) rotate(45deg); /*X軸方向に230px移動し、45度傾く*/
}/*1.8秒後*/
100%{
transform: translateX(100px); /*X軸方向へ100pxの所へ移動し、傾きは戻る*/
border-radius: 50%; /*円になる*/
background-color: #ddd; /*背景色を#dddにする*/
}/*3秒後*/
}
/*アニメーションの設定*/
.box:hover{
animation-name: example; /*keyframesの名前が"example"*/
animation-duration: 3s; /*3秒間かけてアニメーションする*/
}次回やりますがanimation-durationプロパティはtransition-durationプロパティと同じくアニメーションにかかる時間を指定できます。ここでは3秒に指定しています。
60%ということは1.8秒(3秒×60%)の時にX軸方向に200px移動し、45度回転します。
さらに100%の終了時にはX軸方向に100pxの位置に移動し、背景色が変わり、形も円になるような指定になっています。
4.まとめ
| 違い | transition | animation |
|---|---|---|
| 開始のタイミング | 動かすにはきっかけが必要 | 好きなタイミングで動かせる |
| 途中にスタイルを入れられるか | できない | できる |
| 再生回数 | 一回 | 設定した回数(1~無限) |
| 戻り方 | 逆再生で戻る | 初期値に戻る |
- 基本は開始時のプロパティと終了時のプロパティを指定する
@keyframes 名前{
0%{
プロパティ名: 値;
}
100%{
プロパティ名: 値;
}
}- 間にもフレームを指定できる
/*例*/
@keyframes 名前{
0%{
プロパティ名: 値;
}
60%{
プロパティ名: 値;
}
100%{
プロパティ名: 値;
}
}- 0%と100%の時は”from”, “to”というキーワードに言い換えて指定できる
@keyframes 名前{
from{
プロパティ名: 値;
}
to{
プロパティ名: 値;
}
}- 0%の指定は省略し、終了時のみの指定もできる
@keyframes 名前{
100%{
プロパティ名: 値;
}
}- @keyframesで作ったものを呼び出すプロパティで、指定しないと動かない
セレクター{
animation-name: @keyframeで付けた名前;
}次回からアニメーションで使えるプロパティについてもっと詳しくやっていきます
コメント