[CSS3,animate.css,sass]sassを使ってanimate.cssでhoverアニメーション（きっと完全版）




[CSS3,animate.css,sass]sassを使ってanimate.cssでhoverアニメーション（きっと完全版）
2回続けてアニメーションネタですよ。こんに千葉。鹿児島からこんに千葉。
むかしこんな挨拶でスタートするAction Script BegenersっていうFashのサイトやってたのを思い出しました。

animate.cssの基本

今回もアニメーションネタなんですが、animeta.cssを使いたいと思います。
animate.cssの使い方はいろんなサイトに掲載がありますので簡単に。

animate.cssをダウンロード

html

<link rel="stylesheet" href="css/animate.css">

<div class="animated shake">ブルブル</div>

これだけで「ブルブル」という文字はブルブルします。
classのanimatedはそのままにしてshakeをbounceやflashなどにするとはねちゃったりチカチカしたりします。

これだけじゃツマラナイのでhoverでアニメーションさせるには？ってお話です。

sass、compassの環境必須

animate.cssをhover時に使うにはsass、compass環境が必須です。
cssが大好きなお友達はもう構築してると思うからここでは説明はしないよ！
構築がまだのお友達は下記のサイトが分かりやすいと思うし、このブログでも構築中エラーが出たときのお話はしてるから参考にしてね！

エラーが出たら

環境はできてる体で進めます。

animate.sassのダウンロード

adamstac/animate.sassからanimate.sassをダウンロードします。

Download ZIPでダウンロードします。
adamstac/animate.sass

解凍したフォルダの中に「_animate.sass」ファイルと「animate」フォルダがあります。今回はこの2つを使います。
animate.sass-master/stylesheetの中です。

サンプル

例えばanime.scssというsassファイルを作り以下のように書きます。

@import "compass";
@import "animate.sass";

a {
   &.btn {
        display: block;
        padding: 1em;
        margin: 100px;
        border: 1px solid #888;
        background: #111;
        color: #fff;
        width: 150px;
        text-align: center;
        text-decoration: none;
        @include border-radius;
    }
    &:hover {
        @include animation(shake);
    }
}

compassをインポートして先ほどダウンロードした「_animete.sass」もインポートします。

続けて適当にaタグに対して装飾していきます。
:hoverで@include animatioin(動きのプロパティ);と書けばホバー時のアニメーションできあがり。

ちなみにhtmlはanime.scssをコンパイルしたanime.cssをリンクしてaタグを書くだけです。↓

<head>
<link rel="stylesheet" href="css/anime.css">
</head>

<a href="#" class="btn">うりゃ！</a>

サンプルどうぞ ボタンがプルプルします。（※IE+10）

肝心のアニメーションの種類ですが、がんばって一覧作ったのでサンプルで置いときます。

がんばったサンプル

アニメーションの設定

もちろんアニメーションを細かく設定することも可能です。

  • @include animation-duration(単位ｓの秒数);
    1回のアニメーションにかかる時間
  • @include animation-delay(単位ｓの秒数);
    アニメーションを開始するまでの待ち時間
  • @include animation-timing-function(ease);
    アニメーションの変化。デフォルトはease
    ease、linear、ease-in、ease-out、ease-in-outなど
  • @include animation-fill-mode(both);
    アニメーションが適応される前後の状態

    • none・・・デフォルトの値でアニメーションの前後にはスタイルを適用しません。
    • backwards・・・アニメーション終了後にそのスタイルを維持します。
    • forwards・・・アニメーション開始前に@keyframesが0%もしくはfromのスタイルを適用します。
    • both・・・backwardsとforwardsの両方のスタイルを適用します。(デフォルト値)

まとめ

ページを表示したらいきなりアニメーションってのはユーザビリティ、アクセシビリティ的になしですよね。
でもsassを導入してれhoverに対応させたり簡単にできますので、ブラウザの問題は置いといて使えるんじゃないかしら。
とりあえずはIEですね。+10なので日の目を見るのはまだまだ先のことでしょうがとりあえず完全版メモってことで。

タイトルとURLをコピーしました