Animate.cssでscssを使ってhover時もアニメーションをさせる
前回(cssだけでカッチョイイアニメーションをさせるAnimate.cssメモ - kurotei datebook)の続きです。
前回のAnimate.cssではhover時にアニメーションを設定できませんでしたが、SASS(scss)を使うことによって解決できます。scssってなんぞって人はgruntでググってください。koalaでもok。次あたりにgruntの記事は書きます。
使い方
簡単･･･ってわけでもないです。慣れると楽だけどね。
まずダウンロードする
まずここ(jackilyn/animate.scss · GitHub)からAnimate.scssをダウンロードしましょう。右下の「download zip」でダウンロードできます。
書く
scssファイルを置くディレクトリに先ほどダウンロードしたzipのsourceを置きましょう。
そして、style.scssみたいな適当なファイルを作って書きます。
@import "source/animate"; //sourceからanimateを@importする
h1{@include tada($duration, $delay, $function, $fill, $visibility); //タグもしくはクラス、IDを指定、@includeの後にアニメーション名を書く
&:hover{
@include shake($duration, $delay, $function, $fill, $visibility); //hoverで使いたい時は&:hover
}
}こんな感じですね。後はこのファイルをコンパイルすればokです。importしたanimateとかはコンパイルする必要はありません。$durationとかをいじると遅延を入れたりいろいろできますが、僕はあまりscssは詳しくないのであとは自分でググるなりしてください。あと、sourceに入ってないアニメーションは使えないので注意しましょう。
前回の記事ではクラスに書き込みましたが、こちらで書いても反映されますので、あまりクラスをごちゃごちゃさせたくない人はつかってみると良いかもしれません。
注意点
hoverしてアニメーションをした後、hoverをやめると最初に設定したアニメーションがもう一度再生されます。なので、hoverのアニメーションを付ける場合はbounce等外からくるアニメーションは辞めた方が良いでしょう。
