geta1972TweetPocketCheckcssアニメーションは、繰り返しをする事が基本に作られているため、タイムラインのような表示を行う事が少し難しい場合があります。音楽を流しながら、タイミングを見て、アニメーション内容を変更するような場合、事前に全ての秒数を設計した構築をしておかなければいけませんが、cssで部分的なアニメーションを作って、javascriptで切り替える事で便利でメンテナンスしやすい換気用を構築してみましょう。通常の設定WEBページでmp3を流しながら画像を使ったアニメーションを行うような表現をする場合、以下のようにcssでタイムラインを構築します。この時に、アニメーションの全体秒数の設定を行い、その割合(%)でセットするcssのアニメーション設定は、動画設定を行う上ではかなり扱いづらいと感じると思います。act-fo{0%{opacity:1;}100%{opacity:0;}}※サンプル画像cssの中に、2つのkeyframeを時間を指定してセットしているのがわかると思います。cssは、動画コントロールには向いていないんです。jsでコントロールcssでは、部分的なアニメーションを作成しておきます。act-fo{0%{opacity:1;}100%{opacity:0;}}次にjsで指定のタイムラインに到達したら、エレメントのstyle-animetionの内容を切り替えます。"act-2";},5000);cssのanimation属性を変更するとリセットされるどうやらcssのanimation設定は、内容を変更すると、その時点が0%になり、そこからアニメーションがスタートする仕様になっているようです。この特性を利用すると、動画のカット毎に作られたアニメーションを、javascriptでスタートタイミングだけを測ってアニメーションを切り替えてあげると、映画のようにシーンをつなぎ合わせてくれるタイムライン動画が出来上がります。工夫すると、インタラクティブなWEBページが作れそうですね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。