背景画像がゆっくりと浮かび上がったり、オンマウスで背景画像がスライドしたり、以前はjavaやFlashでしか表現できなかった効果をCSSだけでつけることができる。CSStransitionについてご紹介します。
CSS transition対応ブラウザ
CSS3 transitionは御察しの様に、対応しているブラウザには限りがある。現時点での対応ブラウザに関しては下記を参考にしてください。
https://developer.mozilla.org/ja/docs/Web/CSS/transition
徐々に対応ブラウザも増加してく事でしょうし、oldブラウザでバグがでるわけでもありませんので、ぜひ積極的に取り入れていきたい技術です。
CSS3 trasitionが注目される理由
ソースが軽い
CSSのみでアニメーション効果をつけることは、java等でつけるそれと比べて、ページ読み込み速度が速いというメリットがある。
デザインの幅が広がる
レスポンシブデザイン等で、マルチデバイスにワンソースで対応するといった設計が主流になりつつある中、スマホ向けのデザインはどうしてもシンプルなものになりがちです。そんな中で、CSS transionはデザインにワンポイントアクセントを加えるの要素となります。
CSS transitionを簡単に生成できるサービス
こうしたサービスは本当にありがたいです。作業効率が格段にあがります。
Ceaser
イージングの調整をオンラインで簡単に行うことができる。調整後はソースをコピーするだけ。
animatable
こんなにあるんですね・・・・。アニメーションの一覧を見れるサイトです。どんな効果が最適か、まずはこのサイトを見てから考えると良いかもしれません。
liffect effect for lists
リスト化された画像にアニメーションをつけてくれるサービスです。
Animate.css
ボタンの動きを確認しながらアニメーションを選ぶことができる。
他にも便利なツールがあるのでぜひトライしてみてください。
検索のヒント
” CSS アニメーション ツール “