CSSでアニメーションをつける方法について、簡単にまてめておきます。
詳しくは自分でググってみて下さい(笑)
CSSを使って動きをつけるには、大きく2つの方法(プロパティ)があります。
簡単に二つの方法についてまとめておきます。
「transition」プロパティを利用する。
簡単に動きをつけることができる。
逆に言うと、細かな設定はできません。変化前→変化後のタイミングや度合いの調整をすることができます。
要素単位で指定する。
変化させたい要素毎に設定が必要になります。
きっかけが必要になる。
:hoverや:activeなどの要素の変化が必要になります。この変化に対して動きをつけることになります。
「transition」で設定できるプロパティ
transitionは一括指定プロパティです(複数の要素に指定する場合はカンマ区切り)
transition: <property> <duration> <delay> <timing-function> ;
記述の順序に決りはありませんが、<duration> <delay>は同じ時間の指定なので、先に記述した方が<transition-duration>の指定となります。
プロパティ | 内容 | 初期値 |
---|---|---|
transition-property | 動きをつける対象のプロパティ | all(すべて) |
transition-duration | 動きの時間 | 0s |
transition-delay | 動きを開始するタイミング | 0s |
transition-timing-function | 動き(変化)の度合い | ease(最初と最後はゆっくり変化) |
transition-propertyの種類
none:どのプロパティも対象としない
all:全てのプロパティを対象
プロパティ名:指定たプロパティを対象
timing-functionの種類
ease:最初と最後はゆっくり変化
ease-in:最初はゆっくり、最後は速く変化
ease-out:最初は速く、最後はゆっくり変化
ease-in-out:easeよりも最初と最後はゆっくり変化
liner:一定に変化
cubic-bezier( x,y,x,y ):ぺジェ曲線により任意に指定
簡単な例
.sample { font-size: 20px; color: #ffffff; transition: color 2s 0s ease; /* colorプロパティのみに動きをつける */ } .sample:hover { font-size: 16px; color: #000000; }
「animation」プロパティを利用する。
「transition」よりも、より細かな動きを設定することができます。
「@keyframes」で変化させたい要素の開始時の状態と終了時の状態を設定
「animation」プロパティで詳細を設定
「@keyframes」を設定する。
変化させたい要素の状態を書きます。
例:最初は透明ですが徐々に見えてくるような動きの場合(opacityを0から1に変化)
@keyframes <アニメーションの定義名> { 0% { opacity: 0; } 100% { opacity: 1; } }
0%が開始時、100%が終了時になりますが、中間時(20%,50%など)も指定すれば、より細かな動きを設定することができます。
動きを定義しておくことで、「animation」プロパティで何度でも使うことができます。
「animation」で設定できるプロパティ
animationは一括指定プロパティです(複数の要素に指定する場合はカンマ区切り)
animation: <name> <fill-mode> <property> <iteration-count> <timing-function>
<delay> <duration> <play-state> ;
記述の順序に決りはありませんが、<duration> <delay>は同じ時間の指定なので、先に記述した方が<animation-duration>の指定となります。
プロパティ | 内容 | 初期値 |
---|---|---|
animation-name | アニメーションの定義名 | 半角英数字で自由に指定 |
animation-fill-mode | アニメーションの開始時と終了時の状態 | none |
animation-duration | アニメーションの1回の長さ | 0s |
animation-iteration-count | アニメーションのループを指定 | 1 |
animation-timing-function | アニメーションの変化の度合い | ease |
animation-delay | アニメーションを開始するタイミング | 0s |
animation-direction | アニメーションの再生の向きを指定 | normal |
animation-play-state | アニメーションの再生と停止 | running |
animation-fill-modeの種類
none:指定なし
forwards:最後の状態を保持
backwards:最初の状態に戻る
both:forwardsとbackwardsの両方が適用
animation-iteration-countの種類
infinite:無限に繰り返す
数値:繰り返す回数を指定
animation-timing-functionの種類
ease:最初と最後はゆっくり変化
ease-in:最初はゆっくり、最後は速く変化
ease-out:最初は速く、最後はゆっくり変化
ease-in-out:easeよりも最初と最後はゆっくり変化
liner:一定に変化
step-start:開始時に最終の状態まで変化
step-end:終了時に最終の状態まで変化
steps( 数値, start もしくは end ):パラパラ漫画のように指定したコマ数で変化
cubic-bezier( x,y,x,y ):ぺジェ曲線により任意に指定
animation-directionの種類
normal:順方向に再生
reverse:逆方向に再生
alternate:順方向と逆方向が交互に再生(奇数回は順方向、偶数回は逆方向)
alternate-reverse:逆方向から始まり、順方向と交互に再生
animation-play-stateの種類
running:再生
paused:停止
簡単な例
.sample { animetion: anime fowards 6s 2 ease 2s reverse normal running; } @keyframes anime { 0% { opacity: 0; } 100% { opacity: 1; } }
まとめ
設定できるプロパティにもいろいろな種類があり、説明を見ただけではどんな動きをするのか、なかなかイメージできないなぁと思いました。
実際に色々と設定内容を変えてみて、どのような動きになるのかを確認していくことが大切だと思います。やってみて慣れるが一番ですね。
コメント