CSS TransitionやCSS Animationについて入門の入門

Published: 2018年9月12日 by tomsato

概要

CSSアニメーションについてまとめる

CSSでアニメーションを実装する上でCSS AnimationとCSS Transitionの2種類があるのでそれぞれまとめていく

CSSアニメーションのメリットについて

何故CSSでアニメーションを行うのか

  • JavaScriptが不要(クリック時に何かアニメーションさせるなどの場合はJavaScriptは必要)
  • 単純なアニメーションの場合は実装が簡単

CSSアニメーションの種類

CSS Animation

キーフレームアニメーションを適用できる機能、細かい動きのアニメーションを実装する時に利用する

キーフレームアニメーションとは、アニメーションの開始(0%)から終了(100%)までの経過地点にプロパティを指定できるアニメーションのこと(プロパティを指定した経過地点のことをキーフレームという)

CSS Transition

一定時間でプロパティを変化させる機能、単純な動きのアニメーションを実装する際に利用する

ブラウザのサポート状況

CSS Animation

IEについてはIE10以降からサポートしている
またiOS8.0以下やAndroid4.4.x系向けに対応したい場合はベンダープレフィックスを書く
詳細はこちらのcaniuseを参考にする

ベンダープレフィックスについての参考:そのベンダープレフィックス、いつまでつけてるの?

CSS Transition

IEについてはIE10以降からサポートしている
Androidは4.3以下も対応する場合はベンダープレフィックスが必要
詳細はこちらのcaniuseを参考にする

CSSアニメーションの使い分けについて

JavaScriptとの使い分け

CSSアニメーションとJavaScriptの使い分けについてはこちらを参考にする
CSS アニメーションと JavaScript のアニメーションの比較

要素を拡大/縮小させるなど、単純なアニメーションの時にはCSSアニメーションを使うのが良さそう

CSS TransitionとCSS Animationの使い分け

  • CSS Transitionはhoverなどきっかけがないと動かない
  • CSS Animationはループが可能
  • CSS Animationはキーフレームで細かい設定が可能(10%の段階でこの色に、50%の段階ではこの色で高さはこうするなどが指定できる)

サンプル

CSS Animation

記述例

animation: anime1 2000ms ease -2s infinite alternate;

animationプロパティは以下のプロパティを一括で指定することができるプロパティである
左から↓の指定となっている

プロパティ名 説明
animation-name 適用するアニメーションの名前(どういうものを記述するかは後述する)
animation-duration かかる時間
animation-timing-function アニメーションの種類
animation-delay アニメーションを何秒後に開始するか(0の場合でも0sとしないと動かないので注意)
animation-iteration-count 繰り返す回数
animation-direction アニメーション再生の向き、normalの場合は0%→100%までアニメーションさせたらまた0%からのサイクルでアニメーションさせる、alternateの場合は1回目(奇数回)のアニメーションでは0%→100%、2回目(偶数回)では100%→0%と逆方向の再生となってアニメーションサイクルを繰り返すことになる

また他には以下のようなプロパティもある

animation-fill-mode アニメーションの開始前、終了後のスタイルを指定する
animation-play-state アニメーションの再生・停止を指定する

キーフレームの書き方としては、animation-nameで指定したanime1(アニメーションの名前)を定義する形で、XX%毎(キーフーム毎)にどういう状態になっているかを記述する

@keyframes anime1 {
  0% {
    width: 100px;
    background-color: #01579b;
  }
  100% {
    width: 200px;
    background-color: #439889;
  }
}

See the Pen css animation example by tomsato (@tomsato) on CodePen.0

CSS Transition

記述例

transition: all 1000ms 0s ease;

transition: margin-left, color 5s -2s ease;

transitionプロパティは以下のプロパティを一括で指定することができるプロパティである
左から↓の指定となっている

プロパティ名 説明
transition-property トランジション効果を適用するCSSプロパティを指定する、allの場合は全プロパティが指定される、カンマ区切りで複数のプロパティを指定可能
transition-duration かかる時間
transition-timing-function アニメーションの種類
transition-delay アニメーションを何秒後に開始するか(0の場合でも0sとしないと動かないので注意)

See the Pen css animation example by tomsato (@tomsato) on CodePen.0

アニメーションの終了をJavaScriptで検知する

アニメーションの終了イベントはCSS Animationの場合は「animationend」、CSS Transitionの場合は「transitionend」となる
animation-iteration-countにinfiniteを指定したときの1ループ終了時のイベントはanimationendではなくanimationiterationとなることに注意

また例えばCSSで「-webkit-」のベンダープレフィックスをつけていた場合はJavaScriptのイベントも「webkitAnimationEnd」となることにも注意

See the Pen css animation example by tomsato (@tomsato) on CodePen.0

またtransitionendの場合、変化させたプロパティの分だけイベントが発火するので1回だけカウントしたい場合はpropertyNameで確認する必要がある

See the Pen css transition example by tomsato (@tomsato) on CodePen.0

Animate.css

手軽にCSSアニメーションが実装可能なCSSライブラリとしてAnimate.cssというものがある
簡単に導入、利用ができるのでこれを入れるのが良さそう

公式サイトで各アニメーション毎の挙動を確認できる

サンプルを見るとわかる通りアニメーションを付加させたい要素のclassに「animated (付加させたいアニメーションの種類)」をつけるだけでアニメーションが適用できる、アニメーションをループさせたい場合はclassにinfiniteをつける

See the Pen css animation example by tomsato (@tomsato) on CodePen.0

CSS 入門の入門

Share

最近の投稿

概要はじめに2019年4月から新しいチームに配属されることになって、そこではScalaとPHPを使い分けて開発をおこなっていました4月5月では主に保守運用周り、並びにPHPでの開発を行いつつ、Scalaに慣れるために小さい修正を細々とおこなっていて、6月からついに本格的にScala開発に着手することになりました。レガシーな技術から新しい技術に乗り換えるということで、その中で開発言語はどうする......

概要https://storybook.js.org/StorybookとはUI開発環境を提供するツールReact、React Native、Angular、VueなどをサポートしているStorybookを使うとユーザーは独立した開発環境でコンポーネントを個別に作成して挙動の確認をテストできたり、コンポーネントを一覧にしてカタログ化できるので他の人に紹介する時に使えたりする公式のサンプル集h......

概要フロントエンド開発における状態管理、データフローがなんで重要なのか、Fluxとは何かなど主にVue.js目線ですが忘備録的にまとめますデータフローの設計・状態管理についてアプリケーションの規模が大きくなるに連れて状態管理が重要となってくる状態とはアプリケーションが保持するデータのことで例えばECサイトのカートなど、最初は空の状態から始まり商品をカートに入れることによってカートの中身が増え......

概要前にDoxygenの入門についてまとめたが実際にサンプルを見た方が理解が早いかと思うのでサンプルを作ってみる Doxygen入門の入門 ↑前に書いた記事、そっちでは Doxygenについての簡単な説明 導入方法 書き方などを書いた今回は、まずサンプルを見て理解をしたい人向けにサンプルのアプリケーションをGitHubに用意して、ドキュメントもGitHub Pagesで見ら......

概要1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Trashy.cssというのがあって気になったので使ってみるTrashy.cssを使うとHTMLの構造が可視化されるのでheader,nav,main,article,selction,footerなどの要素が正しく実装されているかを確認することができる{% include google-a......

カテゴリ一覧

データベース 運用 その他 開発 設計 テスト 言語 アルゴリズム 未分類 クラウドサービス AI イラスト デザイン SNS

タグ一覧

MySQL Oracle Linux 資格 テスト CI Jenkins 入門の入門 Perl API その他 Fabric PHP PHPUnit Ruby JavaScript YAML CircleCI C言語 Docker フレームワーク Selenium Fluentd ab Vim React Vagrant Cinnamon 監視ツール postfix HTML Google Cloud Platform Codeception Watson Node-RED LINE Vue.js 入門の次 PCF Vegeta Azure Firebase モジロイ Sass クリーンアーキテクチャ CSS twitter Flexbox 筋トレ ドキュメント Vue Scala