アニメーションを付ける

Masumi Hayashi-Mueller

Updated on:

Animate CSSで繰り返す

画像やボタンに、CSSでアニメーションを付けれます。

Animate.cssを読み込むだけで、簡単に実装できます。

ワードプレスのプラグインなどを使わなくとも、CSSで実装できます。

CSSアニメーションに関して / 利用してほんっとに便利になったと思うことの一つに、今までやたらめんどくさかった
いろんなエフェクトをCSSだけで追加できること。

Webデザイナーが苦手とする、Javascriptも必要ありません。

CSSを読み込んで、HTMLにクラスを追加するだけ!

何て便利なんでしょうか。

CSS3アニメライブラリ

こちらのAnimate.css、新しい動きも随時追加されていてこれはほんとに便利!

そして組み合わせて使用もできます。

もしJSも得意なら、ボタンを押したときに フェードイン、そして何秒後にフェードアウト
などのムービー的な動きも追加できます。

その昔 Flashを避けて、Javascriptでサイト上の動きは付けた方がいい。って
クライアントに力説していた8年前の私に、伝えてあげたい。

合っていますよ・でももっと勉強しとき。

さらに今は、崇高で賢い人たちがライブラリで公開してくれます。ほんとにありがとう。

 

Animate.css使い方

↓ 使い方は

Headに、こんな風に呼び出して。

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

そして、オブジェクトにクラスを振ります。

<div class="animate__animated animate__bounce">ここに動かしたいもの</div>

画像にAnimate。cssの動きを付けて、さらにそれを繰り返す。。

Infinitie=無限に繰り返すの部分を、1.2.3など数字に置き換えるとその数分だけ繰り返せます。

<div class="animate__animated animate__bounce animate__infinite">Example</div>

Baunce 飛び跳ねるエフェクト

<figure class="animate__animated animate__bounce animate__infinite"><img src="cropped-Logoredss-150x150.gif" /></figure>

shakeY Y軸に揺さぶるエフェクト

<figure class="animate__animated animate__shakeY animate__infinite"><img src="cropped-Logoredss-150x150.gif" /></figure>

tada ひねりのあるエフェクト

<figure class="animate__animated animate__tada animate__infinite"><img src="cropped-Logoredss-150x150.gif" /></figure>

jello 左右にひねりのあるエフェクト

<figure class="animate__animated animate__jello animate__infinite"><img src="cropped-Logoredss-150x150.gif" /></figure>

左からフェードインエフェクト

<figure class="animate__animated animate__fadeInLeft animate__delay-4s"><img src="cropped-Logoredss-150x150.gif" /></figure>