[CSS] animationをobjectiveに使う方法

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

cssアニメーションは、繰り返しをする事が基本に作られているため、タイムラインのような表示を行う事が少し難しい場合があります。
 

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

通常の設定

WEBページでmp3を流しながら画像を使ったアニメーションを行うような表現をする場合、以下のようにcssでタイムラインを構築します。
この時に、アニメーションの全体秒数の設定を行い、その割合(%)でセットするcssのアニメーション設定は、動画設定を行う上ではかなり扱いづらいと感じると思います。
 

※サンプル画像
スクリーンショット 2018-05-17 8.39.28

cssの中に、2つのkeyframeを時間を指定してセットしているのがわかると思います。
そうです、cssは、動画コントロールには向いていないんです。

jsでコントロール

cssでは、部分的なアニメーションを作成しておきます。

次にjsで指定のタイムラインに到達したら、エレメントのstyle-animetionの内容を切り替えます。

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

どうやらcssのanimation設定は、内容を変更すると、その時点が0%になり、そこからアニメーションがスタートする仕様になっているようです。
 

この特性を利用すると、動画のカット毎に作られたアニメーションを、javascriptでスタートタイミングだけを測ってアニメーションを切り替えてあげると、映画のようにシーンをつなぎ合わせてくれるタイムライン動画が出来上がります。
 

もう少し工夫すると、インタラクティブなWEBページが作れそうですね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です