coder's log

コーダー日誌

[CSS]CSSアニメーションともろもろご紹介

公開日：2019/11/17

cssであろうとjqueryであろうと、懐かしのflashであっても間違いなく言えることは、アニメーションってアイデアですよね。

技術や手法の知識があっても、かわいかったりかっこよかったり美しいイラストや写真があっても、結局の所、それらをつかってどう魅せるかというセンス・アイデアがないと台無しというか・・・。

ただ派手に動けばいいという問題でもなくて、そこにどうしてアニメーションが必要なのか、なんのためなのか、どう動いたら気持ちいいのかとかも重要。ふさわしくないところで、脈略なくごちゃごちゃ動いていてもかえって不快感をあたえることもあります。

というわけで、いろいろな事例を見て、分析して、引き出しを増やしておくことも大事かなと。

  • 上記リンクはcssアニメーション以外の情報も混ざっています。
  • さまざまな事例を紹介する記事はたくさんあります。古い記事が上位に表示されることも多いですが、よく公開・更新されているので、「事例」「サンプル」などと言ったキーワードとともに「cssアニメ」「jqueryアニメ」といった知りたい技術のアニメーション事例をgoogle先生に訊いてみてください。アニメーションの替わりに「エフェクト」という言葉でも良いかもしれません。

CSSアニメーションでできること

CSSアニメーションと先程から言っていますが、CSSアニメーションにはtransition（プロパティ変化）とanimation（キーフレーム）があります。

ざっくりと、なにかのきっかけ（イベント）で動かしたい場合はtransition、自動再生・ループ・（途中経過の変化など）ちょいと複雑な動きの場合はanimation（キーフレーム）を使ったらいいのかなーという感じです（animationはイベントで動かすこともできます）。
jsなどと組み合わせると、表現の幅が広がるんじゃないかな？

CSS transition

まずはtransitionの方から。
下の手のアイコン（web font）にhoverをtapするとぼやけます（androidなら手のアイコンの外側をtapするともとに戻ります）。

hovertapnot linked
  • IEではぼやけません（ぼやかすcssがサポート外なので、IE11では色のみ変化します）。
.hover_blur{
    transition: all 0.4s ease;
}
.hover_blur:hover{
    color: #777; /* IE11用にフォントカラー設定 */
    filter: blur(2px);
}
  • filterプロパティのベンダープレフィックスは省略しています。Android4ぐらいだとwebkitのベンダープレフィックスが必要なようです。

この例ではぼやけるオブジェクトはweb fontを使っていますが、画像でもテキストでも良いです。
要素に上記の設定を施したclass[hover_blur]をあてれば、hoverイベントをきっかけにふわっとぼやけます（モバイル環境ではtapイベントで反応します）。
なお、transition関連以外の設定は省略しています。

このようにtransitionは元の状態にtransitionプロパティを設定し、イベントによる変化後の幅やら色やら状態を設定することで、アニメーション表現してくれます。
数値で指定できるcssプロパティなら、たいていtransitionしてくれるっぽいです。

CSS transitionだけではループできず、動かすにはhoverなどのきっかけ（イベント）が必要です。どうしても自動再生・ループさせたい、複数のイベントの組み合わせで動かしたいといった場合はjs（jquery）などのスクリプトの力を借りてください。
CSS transitionについていくつか記事をご紹介しますが、詳細はgoogle先生たちに訊いてください。

なお、オブジェクトをぼやかすcssは以下を参照しました。

CSS animation

今度はanimation（キーフレーム）です。先程からしつこく（）でキーフレームと入れているのはCSSアニメーションとざっくりひとまとめにした手前、transitionと区別するためです。
animation（キーフレーム）は@keyframesと組み合わせて、アニメーションを設定します。

下の画像は簡単な例ですが、ここまで丁寧に読んでくださっている場合は、すでにアニメーションが終わっていると思うので、リロードするか、画像にhoverしてください。再生します。

  • IEではいろいろ未対応なので、他のブラウザのようには動作しません。
    IE10/11でもアニメーションは動作するものの、一部のプロパティが未対応なため、他のブラウザ（の最新バージョン）のような変化はしません（画像の縦横比もおかしくなっています）。
unsplash-logofabe collage
  • ここで使用している画像は以下を参照。画像の使用はリンク先の利用規約に従ってください（日本語の説明がないので以下の記事も参考にしてください）。

CSSは以下のようになっています。animation（キーフレーム）の設定以外は省略しています。

.css_animation{
    animation: ani_link 6s ease 3;
}
.css_animation:hover{
    animation: ani_hover 5s ease 3;
}

@keyframes ani_link { 
    0% { opacity:1; } 
    40% { opacity: 0.5; } 
    45% { opacity:1; } 
    55% { opacity: 0.5; } 
    100% { opacity:1; } 
}

@keyframes ani_hover { 
    0% { opacity:1; filter: saturate(300%);} 
    30% { opacity: 0.7; filter: saturate(100%);} 
    100% { opacity:1; filter: saturate(300%);} 
}
  • hoverによってアニメーションが変化しますが、hoverを解除すると、元のアニメーションにもどります。
  • モバイル端末の場合は、リンクをtapするとhover時のアニメーションになります。
    ただし、Unsplashのサイトにジャンプしますので、15秒以内にこのページに戻ってこないと確認できません。
  • androidなら、a要素の範囲外をtapするとhover状態が解除され、元のアニメーションに戻ります。
  • なお、filterプロパティのベンダープレフィックスは省略しています。Android4ぐらいだとwebkitのベンダープレフィックスが必要なようです。

animationプロパティでつけた名前（ここではani_linkとani_hover）に対応する動きを@keyframesで設定しています。

この例ではページが読み込まれるとani_linkのアニメーションが3回繰り返されます。
class[css_animation]を指定したa要素の範囲内にhoverすると、hover中はani_hoverが3回繰り返されます。

ani_hoverが動作中でもhoverが解除されると、再びani_linkのアニメーションが3回繰り返されます（このあたりの挙動はMacOSでは異なるかもしれません・・・少なくともiOSでは異なりました）。

animationプロパティでは名前の他に、一連のアニメーションが実行される時間やそれを繰り返す回数（ループ再生や繰り返さない場合も含む）などを設定できます。

@keyframesでは一連の動き（変化）を設定します。
この例のani_linkでは、6秒間に起こる変化（opacity）を設定しています。6秒を100%として、例えば40%の時点でopacityが0.5になるように変化していきます。この6秒間に起こる変化を1回として、これを3回繰り返しています。

ani_hoverでは、5秒間に起こる変化を設定しているので。5秒を100%として、その範囲で起こる変化を設定しています。
ani_hoverのように複数の変化を一緒に設定することもできます。

animation（キーフレーム）では、ページの読み込みと同時に再生することも、読み込んでから一定時間経過後に再生することも、hoverなどのイベントで再生することも可能です。
というわけで、animation（キーフレーム）についていくつか記事をご紹介しますが、詳細はgoogle先生たちに訊いてください。

参考になりそうな記事いろいろ

他にも参考になりそうな記事やジェネレーターがあったので、参考までに。
もちろん、こうしている間にも世界中の方々が素敵な情報を提供・更新してくださっているので、しつこいですが最新情報や詳細はgoogle先生たちに訊いてください。

  • 上記リンクは純粋なcssアニメーションだけでなく、jsなどを組み合わせているものも含まれています。
    よくわからなくても仕組み的なところは参考になると思いますし、たいていコピペで使えたりします。

CSSアニメーション以外の選択肢あるいは複数技術の組み合わせ

アニメーションを実現するのにCSSを使うか、それ以外を使うかは、実現したい動きの複雑さ、動かすきっかけ（イベント）やその組み合わせ、ターゲットユーザーの環境なども考慮して、最適なものを選べばよいのであって、CSSにこだわらなくても良いです。複数の技術を組み合わせても良いでしょう。

ではなぜCSSアニメーションが注目されるかは、描画速度や動きの軽快さ・滑らかさなどの利点があるからです。
jsなどのスクリプト言語を学習していないhtmlコーダーでもCSSなら書ける場合もあるので、学習コスト・開発コストの面でも利点があります。

とはいえ、CSSアニメーションなら必ず動きが軽いわけでも、誰でも実装できるわけでもないので、実装テストも含めた工数をちゃんと確保してください。

以下はちょい古い記事ですが、参考までに。

webアニメーションの種類としては、他にgifアニメ・svgアニメ・APNG・アニメーションWebPといった画像系やjs（DOM操作・canvas・WebGL、jqueryなどライブラリ系、vue.jsなどフレームワーク系）があります。たぶん、これからもいろいろ技術が出てきます。
主要なブラウザに対応するまでに時間がかかったり、注目された割にはすぐ消えたりもあるかもしれませんが、アンテナ高く情報を入手していきたいですね。

なお、Flash(swf)はセキュリティ等の複数の問題により、2020年末までに終了するとAdobeが宣言済みです。
各ブラウザによるサポートも段階的に終了方向に向かっていて、2020年末までに完全に使えなくなると思われます。
flashの名作もいろいろあるので、参考にしたい人は早めに見ておいたほうが良いかもしれません。
古いブラウザ＋プラグインで見られそうな気もしますが、OSが対応しなくなるかもですし、ページやサイト自体も削除されるかもしれません。
なんとなく、有志の方々がスクリーン録画してYouTubeなりなんなりで公開してくれそうな気もしないでもないですが、ちゃんと許可とってやってくれるかどうかは不明ですし、あんまり他人に頼りすぎてもね・・・。

なんか、簡単にCSSアニメーションをご紹介するだけのつもりが、次いつアニメーションをネタにするかわからないので、CSSアニメーション以外も含め、もりもりリンクを載っけちゃいました・・・。

Top

go to homeindex

go to home

© 2019 coder's log :: コーダー日誌