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の中に、２つの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ページが作れそうですね。
0 件のコメント:
コメントを投稿