アニメーションを付ける

画像やボタンに、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>