animation.cssの使用例

アニメーション表現例

animation.css使用の具体例です。再実行はブラウザの再ロードボタンをクリックします。

びっくり箱 Jack-in-the-box(zoomIn) ©2021 TacM, Ver0.01

サンプルコード

<head>								<!-- びっくり箱をアニメーション表示 -->
  <meta charset="utf-8">
  <style>
  #container{						/** 画面の左右の中央に表示 **/
	width: 640px;
	margin: 0 auto;
	padding: 0.6em 2em 2em 2em;
	color: mediumvioletred;
	font-size:22px;
	font-weight: bold;
  }
  </style>
  <link rel="stylesheet" href="https://aidesign.lolipop.jp/wp-content/uploads/2021/03/animate.css">		<!--Animate.css(V4.1.1)を読み込む-->
</head>
<div id="container">&emsp;びっくり箱&emsp;Jack-in-the-box(zoomIn)
  <img class="animate__animated animate__zoomIn" style="animation-duration:0.8s; animation-delay:0.2s; animation-iteration-count:3; border:2px solid blue; border-radius:20px; display:block;" src="https://thumb.ac-illust.com/56/56146a30d96665280ff4dd5d52a454b4_t.jpeg" width="480" height="340">
</div>
16行目を細分化して再掲
<img class="animate__animated animate__zoomIn"
 style="animation-duration:0.8s; animation-delay:0.2s; animation-iteration-count:3;
 border:2px solid blue; border-radius:20px; display:block;"
 src="https://thumb.ac-illust.com/56/56146a30d96665280ff4dd5d52a454b4_t.jpeg"
 width="480" height="340">

css使い方を深掘りする

前回、『入学を祝う2021』において、animation.cssを使ったアニメーション10例を取り上げました。バージョン4に強化されたcssは巧妙なアニメーションをたやすく実現させてくれます。ライブラリーとしてのcssはバラエティに富む表現を提供してくれますが、class, styleへの指定で思い通りにならずたいへん悩みました。これからのために記録に残します。

animate.cssには100を超えるclass名が内包されています。そのすべてを解説した記事は見当たりませんが、class名の一部swing, shake, zoom, bounce, fadeなどの意味から機能を類推することができます。

今回、その指定方法が思うように行かず戸惑ったことを以下にまとめました。

一般に、div, span, p要素などで参照するclassやstyleに示された情報の本体は別ファイルで用意されたcssや同一ファイルに定義されたstyleブロック内に存在します。それらはhtml内のdiv, imgで参照されますが個別的に指定されていればこの値が最終的に適用されます。

たとえば、アニメーションの繰り返す回数が永久的(infinite)と定義されていてもhtml内のstyleでanimation-iteration-countが再定義されていればこちらが有効になります。上記例はびっくり箱のアニメーション例としてzoomInを使った例です。

補足説明

【フリー素材】金魚が泳ぎまわるGIFアニメ  を参照

animate.cssに定義されているスキルを引き出すに当たり、class名には該当する機能名を指定するに留め、細かい設定はstyleで定義することによって解決しました。animate.cssで定義している繰り返し回数は1~3、遅延秒数は1~5秒です。

cssに規定されていない繰り返し回数:7、遅延秒数:2.6秒を設定するために当初、大いに悩みました。16行目を細分化して再掲に表示したようにanimation-durationなどのパラメーターはstyleに定義します。属性名に続きコロンの後に値を指定します。

コメントを残す

下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください