日別アーカイブ: 2018-03-13

Animateのあれこれ

ものづくり筆耕ブログ

動きを求める

HTML文書は文字の他、画像や音楽を伝えることができます。石、竹、木簡、紙に思いを記録した時代を考えると隔世の感がします。インターネット時代にはHTMLの規約に則って多くの人に格安で迅速に意思を伝達することができるようになりました。

その中で動きのある文書にするにはJavaScriptによる表現が適しています。JavaScriptを使った動的表現を以下に示します。


花火打ち上げ©TacM,2018 Ver0.02







　

JavaScriptはHTMLから独立して語られるほど大きなテーマです。一方、CSSの中にAnimateプロパティがあり、コンパクトな定義ながら動きのある表現を可能にしています。

Animateはモダンブラウザならば、おおかた、動作するようですがIE11でつまずき解決に至ったので記録に残します。

IE11で動作させたい

transformとrotateを用いてdiv要素を回転させるに当たり、keyframesとanimateを駆使したところ、chrome, firefox, opera, edgeでは期待した動作になりましたが、IE11ではどうしても正常動作にはできませんでしたが、ネット上のアドバイスにより解決しましたので記録に残します。

動作コード

以下のサンプルコードにおいて、CSSは別ファイルにせず、style要素で定義し一つのファイルに納めました。

<html>
<style>
.box{
  width: 260px;
  height: 260px;
  background: lightcyan;
  animation: kf 30s ease 0s 1 alternate none;
}
@keyframes kf{
0%{transform: scale(.3);}
50%{transform: scale(.6) rotate(-45deg); background: red;}
100%{transform: scale(1) rotate(180deg); background: blue;}
}
</style>
桃の花言葉：天下無敵、気立ての良さ
<div class="box">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2018/03/peach568A.png" width="260" height="260"/>
</div>
</html>

変更箇所

7行目、animation: kf 30s ease 0s 1 alternate none running;　⇒

　　　　animation: kf 30s ease 0s 1 alternate none;

上記のようにnoneの後のrunningを削除しました。インターネットを検索したら、ありがたい情報が見つかり採用したところ期待した動作になりました。

動作例

桃の花言葉：天下無敵、気立ての良さ

ひとこと

動作コードに示すように、JavaScriptコードを一行も使わないで動きのある文面を作ることができましたがまだ、納得のいかないところがあります。動きのある文書作りの一環として、animateを見直しもっと深く理解したいと考えています。