CSS Animationでアニメーションを表現する

css

2019-08-10

CSS Animation

CSSにanimationと@keyframesを記述してアニメーションの設定をします。
まずは点滅するオブジェクトを作ってみました。

@keyframes

キーフレームは0%(アニメーションの開始)から100%(終わり)まで細かく指定できます。

@keyframes anime_name {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

 

anime_name の部分は任意です。

セレクタ {
    animation-name: anime_name;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

 

  • sample

はじめは透明、2秒かけて不透明になるフェードインを繰り返すアニメーションになります。

このようにanimationプロパティとkeyframesの設定によってさまざまなアニメーションを表現できます。

CSS Animationで設定できること

animation-name
キーフレームの名前
animation-duration
アニメーションの長さ ※時間の単位は 1s=1000ms=1秒
animation-timing-function
開始~終了までの変化のしかた。ease(初期値)、ease-in、ease-out、ease-in-out、linearなど
animation-delay
アニメーション開始までの時間
animation-iteration-count
繰り返す回数。無限の場合infinite
animation-direction
アニメーションの向き normal、reverse(逆方向)、alternate(交互)、alternate-reverse(逆方向で交互)
animation-fill-mode
アニメーション前後のスタイル
none:アニメーション開始前と後、スタイルを適用しない
forwards:アニメーション終了のスタイルのまま
backwards:アニメーション開始時のスタイルが開始前のスタイル
both アニメーション開始前と後、両方にスタイルを適用
animation-play-state
アニメーションの再生・停止 running(初期値)、paused

ショートハンドプロパティ

半角スペースを入れて記述します。(animation-duration、animation-delay以外は順不同)

セレクタ {animation: animation-name 5s ease-out 1s infinite alternate forwards running;}

 

複数プロパティ

カンマを入れてまとめて記述します。

セレクタ {animation: animation-name01 2s, animation-name02 5s infinite;}

 

CSS Animation Sample

  • 雲がぷかぷか浮かぶ
    アニメーション

  • セレクタ {animation:cloud 3s ease-in infinite alternate both;}
    @keyframes cloud{
      0% {
        transform:translate(2px,30px);
      }
      100% {
        transform:translate(-2px,0px);
      }
    }

     

  • 雲が流れるアニメーション

  • セレクタ{
    animation:cloud02 20s linear infinite; 
    background:url(https://design-webnote.com/wp/wp-content/themes/stinger8-child/images/cloud.png);
    background-size: 100px;
    background-repeat: no-repeat;
    width: 100%;
    height: 100px;
    }
    @keyframes cloud02{
    0% {background-position: 400px 0;}
    100% {background-position:-100px 0;}
    }

     

-css

関連記事

CSSで上下センター揃え

上下センター揃え フレックスボックス 「display: flex」を使います。 セレクタ{display: flex; justify-content: center; align-items: c …

CSSで影をつける

CSSでドロップシャドウをつける方法を二つ紹介します。

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

隣接セレクタ・間接セレクタ・直下セレクタとは? 隣接セレクタ 要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。 間接セレクタ 要素 …

CSSで縦書き

縦書き 文章を縦書きにして右から左へ流す。 縦書きの基本 文章を縦書きにして右から左へ流す。 親{text-align:right; display: inline-block;} 子{writing …

CSS Transitionで手軽にアニメーションを取り入れたい

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね!

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。