このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows:スリープ復帰時のパスワード入力をやめる (12/07)
  • Windows:ミス激減!チェックボックスでファイルを複数選択する (12/05)
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • かしこいかわいい新PC「エリーチカ」がやってきた(時々ポンコツ) (11/28)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

    ウェブでアニメーションさせる方法を徹底的に調べてみた

    このエントリーをはてなブックマークに追加
    イメージ


    こんにちは、さち です。

    先日、ウェブサイトでアニメーションをさせる方法について
    調べる機会がありました。

    その時に
    CSS の「transition」「animation」を使う方法も知ったのですが
    これが結構複雑で理解して使うには多くの知識が必要でした。

    今回は、その時に学習した内容を徹底的にまとめました。
    多くのサンプルも付けて分かりやすい解説を心がけたので
    少しでも読んでくれた人のお役に立てれば幸いです。




    jQuery(JavaScript) でアニメーション

    jQuery(JavaScript)の「animate」を使ってアニメーションさせます。
    JavaScript で CSS の値を変更させて動かします。


    ■ソースコード
    <button type="button">クリックで移動</button>
    <div></div>

    div {
    position: relative;
    left: 0px;
    width: 75px;
    height: 75px;
    background-color: #F00;
    }

    $('button').click(function() {
    $('div').animate({'left':'200px'}, 2000, 'swing');
    });

    サンプル



    ■構造の解説
    $('div').animate(
    {'プロパティ名':'アニメーション終点の値'},
    アニメーションにかける時間,
    '変化の速度'
    );

    プロパティ名
    アニメーションさせる CSS プロパティを指定。
    width, margin など数値を扱うものなら何でもOK。コンマで区切って複数指定可能。
    {'left':'200px'} //1つだけ指定
    {'left':'200px', 'width':'150px', 'height':'150px'} //複数指定

    アニメーション終点の値
    アニメーションの終点の値を指定。単位は、「px」以外に「em」「%」でもOK。
    相対的な変化を指定することも可能。
    {'left':'200px'} //「200px」の位置に移動する(絶対移動)
    {'left':'+=50px'} //現在位置から右に「50px」移動する(相対移動)
    {'left':'-=30px'} //現在位置から左に「30px」移動する(相対移動)

    アニメーションにかける時間
    アニメーションにかける時間を指定。数値の単位は「ミリ秒」。
    数値の代わりに「slow(=600)」「fast(=200)」も利用可能。
    初期値は400ミリ秒。
    animate({'left':'200px'}, 1000, 'swing') //1秒かけてアニメーション
    animate({'left':'200px'}, 'slow', 'swing') //0.6秒かけてアニメーション

    変化の速度
    アニメーションの変化の速度を指定。
    「swing」「linear」の2種類から選択可能。初期値は swing。
    animate({'left':'200px'}, 500, 'swing'); //加速→減速
    animate({'left':'200px'}, 500, 'linear'); //一定速度

    サンプル



    ■長所
    • 恐らく、コードの行数が一番少なく手間がかからない
    • jQuery がサポートしているブラウザすべてで動くため
      ブラウザ毎の実装の違いを気にする必要がない


    ■短所
    • jQuery の導入が必要(大した手間ではないけれど)
    • CPUが非力だと動きがカクつく(特に、スマホで顕著)




    CSS の「transition」でアニメーション

    CSS の「transition」を使ってアニメーションさせます。
    アニメーション用に「move」というクラスを作り
    そこに「transition」でアニメーションの制御を記述。
    それを div に追加することでアニメーションを発動します。


    ■ソースコード
    <button type="button">クリックで移動</button>
    <div></div>

    /* アニメーション前の状態 */
    div {
    position: relative;
    left: 0px;
    width: 75px;
    height: 75px;
    background-color: #F00;
    }

    /* アニメーション後の状態 */
    .move {
    left: 200px;
    transition-property: left;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    }

    $('button').click(function() {
    $('div').addClass('move'); //divにクラス「move」を追加
    });

    サンプル



    ■構造の解説
    .move {
    プロパティ名: アニメーション終点の値;
    transition-property: アニメーションさせるプロパティ名;
    transition-duration: アニメーションにかける時間;
    transition-timing-function: 変化の速度;
    transition-delay: 開始を遅らせる時間;
    }

    transition-property(アニメーションさせるプロパティ名)
    アニメーションさせるプロパティ名を指定。
    width, margin など数値を扱うものなら何でもOK。コンマで区切って複数指定可能。
    「all」で全プロパティをアニメーション。初期値は「all」。
    transition-property: left; /* 1つだけ指定 */
    transition-property: left, width, height; /* 複数指定 */
    transition-property: all; /* すべてのプロパティを指定 */

    transition-duration(アニメーションにかける時間)
    アニメーションにかける時間を指定。
    秒[s] または ミリ秒[ms] で指定(1秒=1000ミリ秒)。初期値は0秒。
    Firefox では「0秒」でも単位省略不可。
    transition-duration: 2s; /* 2秒かけてアニメーション */
    transition-duration: 2500ms; /* 2.5秒かけてアニメーション */

    transition-timing-function(変化の速度)
    アニメーションの変化の速度を指定。
    「ease」「ease-in」「ease-out」「ease-in-out」「linear」「step-start」「step-end」の7種。
    「steps(ステップ数,startまたはend)」でステップ数分だけ段階的に変化。
    「cubic-bezier」で3次ベジェでの数値指定も可能(解説省略)。初期値はease。
    transition-timing-function: ease; /* 加速→減速 */
    transition-timing-function: ease-in; /* 加速 */
    transition-timing-function: ease-out; /* 減速 */
    transition-timing-function: ease-in-out; /* easeよりゆっくり加速→減速 */
    transition-timing-function: linear; /* 一定速度 */
    transition-timing-function: step-start; /* 即終点 */
    transition-timing-function: step-end; /* 終点直前まで始点を維持 */
    transition-timing-function: steps(5,start); /* 5段変化(始点で即変化) */
    transition-timing-function: steps(5,end); /* 5段変化(始点を維持) */

    サンプル


    transition-delay(開始を遅らせる時間)
    アニメーションの開始を遅らせる時間を指定。
    秒[s] または ミリ秒[ms] で指定(1秒=1000ミリ秒)。初期値は0秒。
    Firefox では「0秒」でも単位省略不可。
    transition-delay: 0s; /* すぐにアニメーション開始 */
    transition-delay: 2500ms; /* 2.5秒後にアニメーション開始 */

    ちなみに、上記の各プロパティは「transition」でまとめて書くことも可能。
    (「border-width」「border-color」と「border」の関係と同様)
    秒数は先に書いた方が transition-duration として認識されます。
    .move {
    left: 200px;
    transition-property: left; /* アニメーションさせるプロパティ名 */
    transition-duration: 2s; /* アニメーションにかける時間 */
    transition-timing-function: ease-in-out; /* 変化の速度 */
    transition-delay: 0s; /* 開始を遅らせる時間 */
    }

    /* 「transition」でまとめて書くことも可能 */
    .move {
    left: 200px;
    transition: left 2s ease-in-out 0s;
    }


    ■片側トランジション/両側トランジション
    transition をどこに記述するかで
    トランジションが片側のみ,両側ともに付くかが変わります。

    アニメーション後の方に記述(片側トランジション)
    /* アニメーション前の状態 */
    div {
    position: relative;
    left: 0px;
    width: 75px;
    height: 75px;
    background-color: #F00;
    }

    /* アニメーション後の状態 */
    .move {
    left: 200px;
    transition: left 2s ease-in-out 0s;
    }

    サンプル


    アニメーション前の方に記述(両側トランジション)
    /* アニメーション前の状態 */
    div {
    position: relative;
    left: 0px;
    width: 75px;
    height: 75px;
    background-color: #F00;
    transition: left 2s ease-in-out 0s;
    }

    /* アニメーション後の状態 */
    .move {
    left: 200px;
    }

    サンプル



    ■ベンダープレフィックス
    ブラウザに試験実装されているプロパティの名前の頭に付く
    「-webkit-」「-moz-」などがベンダープレフィックスです。

    「transition」は比較的新しく実装されたCSSなので
    ブラウザのバージョンによっては
    ベンダープレフィックスが付いていないと機能しません。

    各ブラウザのベンダープレフィックスは次のとおり。
    動かないブラウザを極力減らすなら全部書いておくのが無難です。
    .move {
    -webkit-transition: left 2s ease-in-out 0s; /* Chrome25, Safari6, Android Browser4.3 以前用 */
    -moz-transition: left 2s ease-in-out 0s; /* Firefox15 以前用 */
    -o-transition: left 2s ease-in-out 0s; /* Opera12 以前用 */
    transition: left 2s ease-in-out 0s;
    }

    現行バージョンで動けばよいのであれば
    ベンダープレフィックス無しでも(Opera Mini 以外)全ブラウザで機能します。
    スマホ用に「-webkit-」だけは書いておく方がよさそう。
    (参考: CSS3 Transitions - Can I use...


    ■長所
    • ハードウェアアクセラレーション(GPU処理)が効くことがあるため
      jQuery(JavaScript) で動かすより動きがスムーズになる
    • 「:hover」等の擬似クラスに使うなら JavaScript は不要


    ■短所
    • 旧バージョンブラウザも考慮すると記述が増えて面倒
    • jQuery より分かりにくい




    CSS の「animation」でアニメーション

    CSS の「animation」を使ってアニメーションさせます。
    アニメーション用に「move」というクラスを作り
    そこに「animation」でアニメーションの制御を記述。
    それを div に(jQueryで)追加することでアニメーションを発動します。


    ■ソースコード
    <button type="button">クリックで移動</button>
    <div></div>

    /* アニメーション前の状態 */
    div {
    position: relative;
    width: 75px;
    height: 75px;
    background-color: #F00;
    }

    /* アニメーションの設定 */
    .move {
    animation-name: anime;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    }

    /* アニメーションの内容 */
    @keyframes anime {
    0% { left: 0px; }
    100% { left: 200px; }
    }

    $('button').click(function() {
    $('div').addClass('move'); //divにクラス「move」を追加
    });

    サンプル



    ■構造の解説
    .move {
    animation-name: 適用するアニメーション名;
    animation-duration: アニメーションにかける時間;
    animation-timing-function: 変化の速度;
    animation-delay: 開始を遅らせる時間;
    animation-iteration-count: 繰り返し回数;
    animation-direction: 繰り返し時の逆再生の有無;
    animation-fill-mode: 開始前,終了後の状態;
    animation-play-state: 再生と一時停止の制御;
    }

    @keyframes アニメーション名 {
    0% { プロパティ名: アニメーション始点の値; }
    100% { プロパティ名: アニメーション終点の値; }
    }

    animation-name(適用するアニメーション名)
    適用するアニメーション名を指定。
    アニメーション名は「@keyframes」の後に続く部分(自由に指定可能)。
    animation-name: anime; /* animeという名前のアニメーションを適用 */

    animation-duration(アニメーションにかける時間)
    アニメーションにかける時間を指定。
    秒[s] または ミリ秒[ms] で指定(1秒=1000ミリ秒)。
    Firefox では「0秒」でも単位省略不可。
    animation-duration: 2s; /* 2秒かけてアニメーション */
    animation-duration: 2500ms; /* 2.5秒かけてアニメーション */

    animation-timing-function(変化の速度)
    アニメーションの変化の速度を指定。
    「ease」「ease-in」「ease-out」「ease-in-out」「linear」「step-start」「step-end」の7種。
    「steps(ステップ数,startまたはend)」でステップ数分だけ段階的に変化。
    「cubic-bezier」で3次ベジェでの数値指定も可能(解説省略)。初期値は ease。
    animation-timing-function: ease; /* 加速→減速 */
    animation-timing-function: ease-in; /* 加速 */
    animation-timing-function: ease-out; /* 減速 */
    animation-timing-function: ease-in-out; /* easeよりゆっくり加速→減速 */
    animation-timing-function: linear; /* 一定速度 */
    animation-timing-function: step-start; /* 即終点 */
    animation-timing-function: step-end; /* 終点直前まで始点を維持 */
    animation-timing-function: steps(5,start); /* 5段変化(始点で即変化) */
    animation-timing-function: steps(5,end); /* 5段変化(始点を維持) */

    サンプル


    animation-delay(開始を遅らせる時間)
    アニメーションの開始を遅らせる時間を指定。
    秒[s] または ミリ秒[ms] で指定(1秒=1000ミリ秒)。初期値は0秒。
    Firefox では「0秒」でも単位省略不可。
    animation-delay: 0s; /* すぐにアニメーション開始 */
    animation-delay: 2500ms; /* 2.5秒後にアニメーション開始 */

    animation-iteration-count(繰り返し回数)
    アニメーションの繰り返し回数を指定。
    小数も指定可能。「infinite」で無限に繰り返し。初期値は1回。
    animation-iteration-count: 2; /* 2回繰り返す */
    animation-iteration-count: 0.5; /* 半分(50%)アニメーションする */
    animation-iteration-count: infinite; /* ずっと繰り返す */

    animation-direction(繰り返し時の逆再生の有無)
    繰り返し時にアニメーションを逆再生させるかを指定。
    「normal」「alternate」「reverse」「alternate-reverse」の4種。
    初期値は normal。
    animation-direction: normal; /* 始点に戻って繰り返し */
    animation-direction: alternate; /* 偶数回は逆再生 */
    animation-direction: reverse; /* 毎回逆再生 */
    animation-direction: alternate-reverse; /* 奇数回は逆再生 */
    /* 旧バージョンのブラウザでは下2つが未対応の場合あり */

    サンプル


    animation-fill-mode(開始前,終了後の状態)
    アニメーション開始前,終了後の状態を指定。
    「none」「forwards」「backwards」「both」の4種。初期値は none。
    animation-fill-mode: none; /* 開始前も終了後もアニメーション適用前の状態 */
    animation-fill-mode: forwards; /* アニメーション終了後は終点を維持 */
    animation-fill-mode: backwards; /* アニメーション開始前は始点を維持 */
    animation-fill-mode: both; /* 開始前は始点、終了後は終点を維持 */

    サンプル


    @keyframes(アニメーションの名前と内容の指定)
    @keyframes の後にアニメーションの名前を記述。
    { } 内にアニメーションのタイミングと内容を指定。
    タイミングはアニメーションの始点が「0%」,終点が「100%」で
    その瞬間のプロパティ,値でアニメーションの内容を指定。
    @keyframes anime {
    0% { left: 0px; } /* 始点のアニメーションの内容 */
    30% { left: 50px; } /* 30%経過時のアニメーションの内容 */
    100% { left: 100px; } /* 終点のアニメーションの内容 */

    /* from(0%), to(100%) と書くことも可能 */
    @keyframes anime {
    from { left: 0px; } /* 始点のアニメーションの内容 */
    to { left: 100px; } /* 終点のアニメーションの内容 */
    }

    animation-play-state(再生と一時停止の制御)
    アニメーションの再生/一時停止の制御の指定。
    「running」「paused」の2種。初期値は running。
    擬似クラス や JavaScript で再生制御に用いるのが主(?)。
    値を調べることで再生中/一時停止中の判別にも使用可能。
    animation-play-state: running; /* 再生 */
    animation-play-state: paused; /* 一時停止 */

    サンプル


    ちなみに、上記の各プロパティは「animation」でまとめて書くことも可能。
    (「border-width」「border-color」と「border」の関係と同様)
    ただし、「animation-play-state(再生/一時停止の指定)」は記述不可。
    秒数は先に書いた方が animation-duration として認識されます。
    .move {
    animation-name: anime; /* 適用するアニメーション名 */
    animation-duration: 2s; /* アニメーションにかける時間 */
    animation-timing-function: ease-in-out; /* 変化の速度 */
    animation-delay: 0s; /* 開始を遅らせる時間 */
    animation-iteration-count: 1; /* 繰り返し回数 */
    animation-direction: normal; /* 繰り返し時の逆再生の有無 */
    animation-fill-mode: forwards; /* 開始前,終了後の状態 */
    }

    /* 「animation」でまとめて書くことも可能 */
    .move {
    animation: anime 2s ease-in-out 0s 1 normal forwards;
    }


    ■ベンダープレフィックス
    ブラウザに試験実装されているプロパティの名前の頭に付く
    「-webkit-」「-moz-」などがベンダープレフィックスです。

    「animation」は比較的新しく実装されたCSSなので
    ブラウザの種類によっては
    ベンダープレフィックスが付いていないと機能しません。

    各ブラウザのベンダープレフィックスは次のとおり。
    動かないブラウザを極力減らすなら全部書いておくのが無難です。
    .move {
    -webkit-animation: anime 2s ease-in-out 0s 1 normal forwards; /* Chrome, Safari, Android Browser 用 */
    -moz-animation: anime 2s ease-in-out 0s 1 normal forwards; /* Firefox15 以前用 */
    -o-animation: anime 2s ease-in-out 0s 1 normal forwards; /* Opera12 用*/
    animation: anime 2s ease-in-out 0s 1 normal forwards;
    }

    /* Chrome, Safari, Android Browser 用 */
    @-webkit-keyframes anime {
    0% { left: 0px; }
    100% { left: 200px; }
    }

    /* Firefox15 以前用 */
    @-moz-keyframes anime {
    0% { left: 0px; }
    100% { left: 200px; }
    }

    /* Opera12 用*/
    @-o-keyframes anime {
    0% { left: 0px; }
    100% { left: 200px; }
    }

    @keyframes anime {
    0% { left: 0px; }
    100% { left: 200px; }
    }


    現行バージョン(2014年9月現在)であっても
    「Chrome」「Safari」「Opera」「Android Browser」などは
    ベンダープレフィックスがないと機能しません。
    これらのベンダープレフィックスはすべて「-webkit-」です。
    (参考: CSS3 Animation - Can I use...


    ■長所
    • アニメーション部をデザイン部のCSSと切り離して書ける
    • 「transition」より複雑なアニメーションを作成できる
    • 「:hover」等の擬似クラスや常に動くものに使うなら JavaScript は不要


    ■短所
    • プロパティが多く、記述が長くなりやすい(=ややこしい)
    • ハードウェアアクセラレーション(GPU処理)が効かない
    • 「-webkit-」のベンダープレフィックス必須(2014年9月現在)




    transition, animation が動かない時の確認点

    transition, animation を使ったアニメーションを作った時に
    記述に間違いが無さそうなのに動かないことが何度かありました。

    原因を探るのに苦労したので
    同じことで困っている人のためにまとめておきます。


    ■「0秒」であっても単位を省略してはいけない
    transition: left 2s ease 0; /* 動かない */
    transition: left 2s ease 0s; /* 動く */

    margin, padding などは数値が「0」のとき単位を省略可能。
    そのせいで transition, animation の秒数指定でも
    「0秒」なら単位を省略できると思いがち。

    他のブラウザでは単位を省略しても動きます。
    しかし、Firefox は動きません。

    「0秒」であっても必ず単位を付けましょう。


    ■アニメーション前の値を指定しないといけない
    /* 動かない */
    div {
    position: relative;
    width: 75px;
    height: 75px;
    background-color: #F00;
    }
    .move {
    left: 200px;
    transition: left 2s ease-in-out 0s;
    }

    /* 動く */
    div {
    position: relative;
    left: 0px;
    width: 75px;
    height: 75px;
    background-color: #F00;
    }
    .move {
    left: 200px;
    transition: left 2s ease-in-out 0s;
    }

    初期値で自動的に値が決まるものは書かなくてもいいだろう。
    そう思いがちです。

    上の例なら、div の left の値は未記入でも「0px」なのは当然。
    「0px」から transition が実行されそうに思えます。

    しかし、大半のブラウザでは動きません。
    (一部の旧バージョンブラウザでは動きます)

    アニメーションに使う値は必ず記述しましょう。


    ■「display」の「none→block」を使うと動かない
    /* 動かない */
    div {
    display: none;
    opacity: 0;
    }
    .fade {
    display: block;
    opacity: 1;
    transition: opacity 2s ease-in-out 0s;
    }

    /* 動く */
    div {
    height: 0;
    overflow: hidden;
    opacity: 0;
    }
    .fade {
    height: auto;
    opacity: 1;
    transition: opacity 2s ease-in-out 0s;
    }

    アニメーションの前は「display: none;」で要素を隠しておき
    アニメーション開始時に「display: block;」で表示させるという手法は
    非常に使いたくなります。

    しかし、この方法を使うと transition が効きません。

    height を「0 → auto」に変化させれば代用に近いことはできます。
    ただし、height が 0 であっても
    「margin」「padding」「border」が空白として残るので前後で書き換えが必要。
    また、あふれた中身が見えないよう「overflow: hidden;」も必須です。

    「display」を使った 表示/非表示 の操作に
    CSSアニメーションが対応してくれれば一番楽なんですけどね。









    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2016 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ