恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

【CSS】animation

投稿日:




 

今回は、コーディング初心者のわたしが学んだanimationプロパティについて
初心者の方に向けて紹介したいと思います!

animationとは

キーフレームを適用することができて、細かい動きを実装することができます。
CSSでアニメーションを表現するには2つの設定が必要となります。
1つ目は@keyframes、もうひとつはanimationプロパティです。
@keyframes でアニメーションする要素のアニメーション開始時の状態と終了時の状態を指定し、animationプロパティで細かく設定します。

@keyframes

@keyframes は、アニメーション開始から終了するまで
どのようなアニメーションをするのか指定できるCSSの文法です。

下記のような書き方をします。

 @keyframes 任意の名前 {
    0%(または、from) {
       CSSプロパティ:値;
    }
   100%(または、to) {
       CSSプロパティ:値;
    }
}

animationプロパティ

@keyframesで定義した動きの変化と組み合わせて、
詳しく記述したものがanimationプロパティです。
animationプロパティには下記8つのプロパティがあります。

プロパティ名 説明
animation-name アニメーションの名前
animation-duration アニメーションの時間
animation-timing-function アニメーション変化の度合
animation-delay アニメーションを開始するタイミング
animation-iteration-count アニメーションの繰り返し回数
animation-direction アニメーションの再生方向
animation-fill-mode アニメーションが再生されていないときの状態
animation-play-state アニメーションを再生させるか一時停止させるか

こちらのDEMOページに、簡単な動きを記載してあるので参考にしてください!

animation-name

先ほど紹介した @keyframes で記述した名前で、@keyframes と紐付けるためのものです。

名前を指定しただけでは、アニメーションは動きましせん。

@keyframes Demo {
   0% {
       width:100px;
  }
 100% {
       width:500px;
  }
}
            
 セレクタ名 {
             animation-name: Demo;
}

animation-duration

アニメーションの再生時間を指定します。
指定できる単位は、s または、ms です。

セレクタ名 {
 animation-name: Demo;
 animation-duration: 5s;
}
        

この場合は、5秒かけてアニメーションが実行されます。
DEMO

animation-timing-function

animation-timing-function は、変化の度合いを指定できるプロパティです。
一定速度で変化させるか、徐々に早くするなど指定できます。
指定できる値は9つあります。

プロパティ名 説明
ease 開始時と終了時には緩やかに変化(初期値)
ease-in 開始時は緩やかに、終了時は早く変化
ease-out 開始時に早く、終了時に緩やかに変化
ease-in-out easeよりさらに、開始時と終了時は緩やかに変化
linear 一定速度で変化
step-start 開始と同時に終了状態に変化
step-end 終了時に最後の状態に変化
steps(正数, start もしくは 正数, end) 指定した正数の段階で変化します。第2引数には start または end を指定できます。start を指定すると、
アニメーション開始時から変化します。end を指定すると、アニメーション終了時に変化します
cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値) 変化の度合いを任意で指定します

DEMO

animation-delay

animation-delay は、アニメーションが始まる時間を指定できるプロパティです。
指定できる単位は、s または、ms です。

セレクタ名 {
 animation-name: Demo;
 animation-duration: 5s;
 animation-delay: 2s;
}
            

この場合は2秒後にアニメーションが開始されます。
DEMO

animation-iteration-count

animation-iteration-count は、アニメーションの繰り返し回数を指定できるプロパティです。
初期値は 1 です。アニメーションを無限に繰り返したい場合は、値に infinite を指定します。

セレクタ名 {
 animation-name: Demo;
 animation-duration: 5s;
 animation-iteration-count: 3;
                    
}
                

DEMO

animation-direction

animation-direction は、アニメーションの再生方向を指定できるプロパティです。
値は下記の4つがあります。

プロパティ名 説明
normal 指定した方向に再生されます
reverse 逆方向に再生されます
alternate 正方向と逆方向を繰り返し再生します
alternate-reverse 逆方向と正方向を繰り返し再生します

DEMO

animation-fill-mode

animation-fill-mode は、アニメーションの開始前、終了後のスタイルを指定できるプロパティです。
初期値は none です。
値は下記の4つあります。

プロパティ名 説明
none アニメーションの開始前、終了後には適用されません
forwards アニメーション終了時のスタイルがアニメーション終了後にも適用されます
backwards アニメーション開始時のスタイルがアニメーション開始前にも適用されます
both forward と backwards の両方が適用されます

DEMO

animation-play-state

animation-play-state は、アニメーションの再生・停止を指定できるプロパティです。
初期値は running です。

プロパティ名 説明
running アニメーションが実行されます
paused アニメーションが停止されます

DEMO

animation

これらのプロパティをまとめて書くことができます。記述する順番は、自由ですが、
各プロパティの値は半角スペースを空けて連続で記述します。
また、animation-duration と animation-delay の2つのプロパティは
両方とも同じ単位で指定するため、最初に記述したものが
animation-durationで、次に記述したものがanimation-delay となります。

 

まとめ

いかがでしたでしょうか!
私もまだ完璧に扱えませんが、たくさん練習してマスターすれば
デザインの幅が広がりそうですね♪




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

kawasaki

kawasaki

webデザイナー、まだまだ勉強中です…