CSS3 にはアニメーション機能があります。
transition と animation です。
animation を使い様々な動きをウイジェットのように作ってくれた方がいます。
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
インストール
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からコピーすればいいかな。
ピンバック: CSS3 animation + transition, 「HTML5+α初心者勉強会 @福岡 第1回」資料を公開しました « イナヅマTVログ