2
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Animate.cssで簡単にアニメーションが実装できる!!

Last updated at Posted at 2019-04-11

はじめに

CSSのライブラリAnimate.cssを使えば、簡易的なアニメーションは簡単に実装する事ができるらしい。
公式サイト、Downloadはこちら

See the Pen yrbMyB by szaizen (@szaizen) on CodePen.

?!?!?!?!?!
めっちゃ簡単にできたよ( ^ω^)
CSSだけのライブラリって使いやすくていいですね(震え声)

初期準備

使用するにはまずlinkタグでライブラリを読み込みます。
ダウンロードして呼び出しても良し、下記をコピーするだけでも良し。

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

使い方

あとは、使いたいタグに animatedクラスと好きな動きのクラスをつけるだけ。
動きは公式サイトから試すことができます。
例えばrollInを選んでAnimate itボタンを押すと上の文字が動きます。これがrollInクラスの動き。

キャプチャ.PNG

この動き使いたい!っていう時は
<div class="animated rollIn">動かしたい文字</div> 
この記述でOK。

他の機能

無限ループ

他にも、ずーっと同じ動きをさせておきたい時は infiniteクラスをつけると繰り返してくれる。

最後に

こんな簡単に使えて、軽量なCSSライブラリ、他にもたくさんあるみたいなので色々使ってみようと思います!!

See the Pen Animate.css by szaizen (@szaizen) on CodePen.

2
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?