[CSS] animationをobjectiveに使う方法

2018年5月18日

CSS テクノロジー プログラミング

cssアニメーションは、繰り返しをする事が基本に作られているため、タイムラインのような表示を行う事が少し難しい場合があります。 例えば、音楽を流しながら、タイミングを見て、アニメーション内容を変更するような場合、事前に全ての秒数を設計した構築をしておかなければいけませんが、cssで部分的なアニメーションを作って、javascriptで切り替える事で便利でメンテナンスしやすい換気用を構築してみましょう。

通常の設定

WEBページでmp3を流しながら画像を使ったアニメーションを行うような表現をする場合、以下のようにcssでタイムラインを構築します。 この時に、アニメーションの全体秒数の設定を行い、その割合(%)でセットするcssのアニメーション設定は、動画設定を行う上ではかなり扱いづらいと感じると思います。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css-animation</title> <link rel="stylesheet" href="anim1.css"> </head> <body> <div class="anim"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu5_m9Pig5nEjpp_vnArRjxlMGF_cJVD01OXfp9Y0oGpJsw3i1Uatf5vzC_7q6EGSlhHpoknTPCYigc4MRHPY7SEhHNl1auqCnFNbQcHJLv0zOsJLbjgJ6FtkT_gdzUO5X9oberVfAuov0o7X70JGNhZYNJDbjy6kuGQmWWGSe_lcpPyGMj56jS39m/s1600/18-1-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2018-05-17-8.39.28.png"></div> </body> </heml> div.anim{ width:200px; height:150px; overflow:hidden; border:2px solid black; } div.anim img{ min-width:100%; min-height:100%; width:100%; animation: act-zi 5s ease-in-out 0s forwards,act-fo 5s ease-in-out 5s forwards; } @keyframes act-zi{ 0%{ transform:scale(1.5); } 100%{ transform:scale(1.0); } } @keyframes act-fo{ 0%{ opacity:1; } 100%{ opacity:0; } } ※サンプル画像 cssの中に、2つのkeyframeを時間を指定してセットしているのがわかると思います。 そうです、cssは、動画コントロールには向いていないんです。

jsでコントロール

cssでは、部分的なアニメーションを作成しておきます。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css-animation</title> <link rel="stylesheet" href="anim2.css"> </head> <body> <div class="anim"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu5_m9Pig5nEjpp_vnArRjxlMGF_cJVD01OXfp9Y0oGpJsw3i1Uatf5vzC_7q6EGSlhHpoknTPCYigc4MRHPY7SEhHNl1auqCnFNbQcHJLv0zOsJLbjgJ6FtkT_gdzUO5X9oberVfAuov0o7X70JGNhZYNJDbjy6kuGQmWWGSe_lcpPyGMj56jS39m/s1600/18-1-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2018-05-17-8.39.28.png"></div> <script src="anim2.js"></script> </body> </heml> div.anim{ width:200px; height:150px; overflow:hidden; border:2px solid black; } div.anim img{ min-width:100%; min-height:100%; width:100%; } div.anim img.act-1{ animation: act-zi 5s ease-in-out 0s forwards; } div.anim img.act-2{ animation: act-fo 5s ease-in-out 0s forwards; } @keyframes act-zi{ 0%{ transform:scale(1.5); } 100%{ transform:scale(1.0); } } @keyframes act-fo{ 0%{ opacity:1; } 100%{ opacity:0; } } 次にjsで指定のタイムラインに到達したら、エレメントのstyle-animetionの内容を切り替えます。 setTimeout(function(){ var img = document.querySelector(".anim img"); img.className = "act-1"; },0); setTimeout(function(){ var img = document.querySelector(".anim img"); img.className = "act-2"; },5000);

cssのanimation属性を変更するとリセットされる

どうやらcssのanimation設定は、内容を変更すると、その時点が0%になり、そこからアニメーションがスタートする仕様になっているようです。 この特性を利用すると、動画のカット毎に作られたアニメーションを、javascriptでスタートタイミングだけを測ってアニメーションを切り替えてあげると、映画のようにシーンをつなぎ合わせてくれるタイムライン動画が出来上がります。 もう少し工夫すると、インタラクティブなWEBページが作れそうですね。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。