イナヅマTVログ

Animate.css

No JavaScript, CSS3アニメーション・ライブラリAnimate.cssをCompassで

| 1件のコメント

CSS3 にはアニメーション機能があります。
transition と animation です。

animation を使い様々な動きをウイジェットのように作ってくれた方がいます。
Animate.css

デモファイルを作りました。
Animate.css

animationと@keyframes

animationて、@keyframesを設定しanimationで実行するんだけど、ブラウザ毎のベンダープレフィックスを設定するの超めんどい。
例えばAnimate.cssのfadeOut設定@keyframesは以下の通りです。

@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
}
  100% {
    opacity: 0;
}
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
}
  100% {
    opacity: 0;
}
}
@-o-keyframes fadeOut {
  0% {
    opacity: 1;
}
  100% {
    opacity: 0;
}
}
@-ms-keyframes fadeOut {
  0% {
    opacity: 1;
}
  100% {
    opacity: 0;
}
}
@keyframes fadeOut {
  0% {
    opacity: 1;
}
  100% {
    opacity: 0;
}
}

使用する時はこんな感じです。

#example {
    -webkit-animation: fadeOut 1s infinite;
    -moz-animation: fadeOut 1s infinite;
    -o-animation: fadeOut 1s infinite;
    -ms-animation: fadeOut 1s infinite;
    animation: fadeOut 1s infinite;
}

Animate.cssは既に作ってくれているので手間いらずですが作ろうとすると手間が多くて気が重い。
しかも愛用しているCompassには、まだanimation用の便利なmixinなどが無い様子。

探してみると、animation用のCompass pluguin 作ってる方がいました。

animation Compass plugin

ericam / compass-animation

インストール

gem install animation --pre

config.rbへ設定

require 'animation'

scssでimport

@import "animation";

これでベンダープレフィックスに悩まされずに@keyframe, animationを書くことができます。

【SCSS】

@include keyframes( fadeOut ) {
    0% {
        @include opacity(1);
    }
    100% {
        @include opacity(0);
    }
}
 
@include animation( fadeOut 1s infinite linear );

ほら、簡単!
Compass 便利だなー

しかもこのpluginはAnimate.cssを内蔵しているらしい。

@import "animation/animate";

とするとAnimate.cssのclassを全部書き出ししてくれるそうです。
試してみたら、wiggle, lightSpeedIn, lightSpeedOut が無いみたい。
必要ならAnimate.cssからコピーすればいいかな。

1件のコメント

  1. ピンバック: CSS3 animation + transition, 「HTML5+α初心者勉強会 @福岡 第1回」資料を公開しました « イナヅマTVログ

コメントを残す

必須欄は * がついています