1. TOP
  2. HTML / CSS
  3. リッチなCSSアニメーションが作れる！10個のサンプルコード・解説付き
詳しくはこちら
HTML / CSS
 | 

リッチなCSSアニメーションが作れる！10個のサンプルコード・解説付き

この記事を読めば、上記のような「サイト読み込み時のリッチなアニメーション」を作れるようになります。一見複雑そうなアニメーションでも、実際の仕組みは単純なものばかりです。基礎さえ理解すれば簡単に実装できます。

今回は、サンプルコードと実際に動くデモを用意しているので、それらを使ってアニメーションの仕組みを解説していきます。

目次

はじめに

CSSアニメーションを理解するには、いくつかのCSSプロパティを理解しなければいけません。

以下の仕様をちゃんと理解していない方は、まずはこれらを理解するところから始めましょう。

  • アニメーション, transition
  • ポジション系
  • transform系
  • overflow: hidden
  • 疑似要素

 

記事前半では、ボタンを例にシンプルなアニメーションの付け方を解説しています。後半ではメインビジュアルで使える複雑なアニメーションの解説をしています。

基礎編

アニメーションの動きの基本は以下の3つです。これらを駆使してアニメーションを作っていきます。

  • positionやtransformで移動させる
  • 疑似要素などでコンテンツを覆い被して隠す
  • overflow: hiddenではみ出た部分を隠す

ボタンの背景が左から出現して元に戻る

background-imageのグラデーションを用いて、ホバーアニメーションを作っています。

ボタンの背景にグラデーションを定義しており、背景色を「0%〜50%」と「50%〜100%」の範囲で指定しているので、左半分と右半分で色がくっきり別れている状態になっています。

さらに、background-size: 200% auto; で背景色の横幅を、ボタンの横幅の2倍にしています。

つまり、通常時には「0%〜50%」の背景色部分が見えて、ホバーすると「50%〜100%」の背景色部分が見えるようになります。

 

ボタンの背景が左から出現して右に消える

こちらは疑似要素を使い、ホバー時の紫の背景を作っています。

transform: scaleX()を0にすると要素の幅が無くなって背景が非表示になり、ホバー時に1にすることで要素の幅をもとに戻して表示されるようにしています。

また、ホバー時のtransform-originの値を右から左（rightからleft）に変えることで、背景が左から右に移動するようなアニメーションになります（厳密には移動はしておらず、背景の横幅が変わっているだけです）。

 

ボタンの背景が左から出現して右に消える（アレンジvar.）

基本的な仕組みはひとつ前で紹介したものと同じです。疑似要素をtransform: skewX(-30deg)で斜めにしたり、ボタンの背景色を全体の背景色と同じ色にして少し違った印象にしています。

疑似要素の透明度を変えると、ガラスがキラっと光ったようなエフェクトにすることもできます。

 

テキストがスライドして出現

このアニメーションではclip-pathプロパティを使って、テキストをスライドさせながら表示しています。

// inset(上 右 左 下);

clip-path: inset(0 50% 0 0);

clip-pathは上記のように定義し、値を100%に近づけるほど、その方向から要素が切り抜かれます。上記のコードの場合、右を50%にしているので、右側半分が切り抜かれます。

※clip-pathはIE非対応です

 

 

以上でアニメーションの基礎の解説は終了です。
以降は、これまでに解説したCSSを使って、メインビジュアルでも使えるリッチなアニメーションを作っていきます。

応用編

テキスト背景スライド→フェードイン

「テキスト背景を左から右に移動させるアニメーション」と「テキスト本体がフェードインするアニメーション」の2つのアニメーションを定義しています。

テキスト背景を左から右に移動させるアニメーションは、テキスト背景を擬似要素で作り、親要素にはoverflow: hiddenを指定。アニメーションが開始したら、テキスト背景を左から右にpositionで移動させています。この移動は、先程解説したclip-pathでも行えます。

テキスト本体がフェードインするアニメーションはとてもシンプルで、opacityで透明度を0から1にしているだけです。

これら2つのアニメーションの実行タイミングをanimation-delayでズラしています。

サンプルコードでは以下のようにショートハンドで書いていますが、0.7sの部分がanimation-delayの数値になります。

animation: anima_fadein_5 0.5s ease-out 0.7s 1 forwards;

テキスト背景スライド→フェードイン（2行バージョン）

先程のアニメーションの2行バージョンです（ブラウザを大きくして見てください）。

1行目と2行目の「テキスト背景を左から右に移動させるアニメーション」の実行タイミングをanimation-delayでズラしています。

背景マスクが斜めにスライド→フェードイン

メインビジュアル全体に覆いかぶさっているマスク（擬似要素で作成）が斜め下から上にスライドしながら消えて、中のコンテンツがフェードインするアニメーションです。

今回注目するポイントはclip-path: polygon()です。

// 通常時
clip-path: polygon(0 0, 100% 0, 100% 150%, 0% 100%);

// アニメーション時
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

clip-pathは多角形に切り抜くこともできます。アニメーション時に底辺を斜めにしながら高さを0にしています。

clip-path: polygon()の書き方の参考：https://www.webdesignleaves.com/pr/css/css_clip_path.html#h5_index_7

階段

ポップなサイトに合うアニメーションです。複雑そうに見えてとてもシンプルで単純な仕組みです。

このように覆いかぶせる用の要素を複数用意して、ひとつずつのアニメーション実行タイミングをanimation-delayでズラしています。

アニメーション実行時は、覆いかぶせている要素のpositionのtopを-100%にして上に移動させています（親要素にはoverflow: hiddenを付けているのではみ出た部分は非表示になる）。

いろいろ組み合わせ

これまでに紹介した技術を複数利用したアニメーションです。

最初に出てくるテキストは、親要素にoverflow: hiddenを指定。親要素の中の<span>にはtransform: translate(0, 105%)で親要素の外に出して非表示にしています。アニメーション時に中の要素に対してtransformの値を元に戻してテキストが下からスライドして出現するようにしています。

テキストが下からスライドして出現した後に、またスライドして消える仕組みは、テキストの疑似要素に背景色と同じ色のものを作って、それを下から上に移動させて覆い被せています。

最後に、覆っている要素まるごと左から右に移動させて、下のメインビジュアル画像を表示させています。

これらのアニメーションのタイミングはanimation-delayで制御しています。

縮小しながらフェードイン

個人的に一番気に入っているアニメーションです（シンプルかつ手軽に実装できるので）。

要素全体をtransform: scale(1.2)で少し拡大しておきます。この要素の親要素にはoverflow: hiddenを付けて、拡大してはみ出た部分は表示されないようにします。

アニメーション時に、transform: scaleの1.2を1.0に戻しながらopacityでフェードインさせています。

まとめ

いかがでしたか？複雑そうな動きの大半は超シンプルなCSSでできています。動きの仕組みとCSSを理解・イメージしていれば簡単にアニメーションは実装できます。

記事前半でも紹介しましたが、以下のスタイルを使いこなせばほとんどのアニメーションは実現できます。

  • アニメーション, transition
  • ポジション系
  • transform系
  • overflow: hidden
  • 疑似要素

アニメーションを実装するときのコツは、複数の動きや処理をひとつずつに分解して考えることです。実際にコードを書くときも、ひとつずつ分解した単位でコードを書いて、最後に合体させれば難しい動きも簡単に実装できるはずです。

関連記事