【初心者】CSS アニメーションの基本技

そろそろCSSでアニメーションをつけてみたいな、と思っている方向けに、CSSアニメーションの基本事項をまとめてみました。

CSSでは色々なトリックを効かせて様々なデザインを仕込むことが可能ですが、全ては基本の応用や組み合わせから成り立っていますね。

基本をおさえてさえいれば、あとは知識と経験とイマジネーションで、基本を汎用的に使い回すだけです。

ということで、まずは足もとを固める基本事項、まとめてみましたのでことあるごとに振り返って見直してもらえればと思います。

では、順を追ってみていきましょう。

 

[rtoc_mokuji title=”Contents” title_display=”left” heading=”h4″ list_h2_type=”round” list_h3_type=”round” display=”close” frame_design=”frame4″ animation=”slide”]

イメージ画像

 

【初心者】CSSでアニメーションの基本技

基本

CSSでアニメーション効果を加えていくにあたり、基本的な考え方は、変化前のスタイルと変化後のスタイルを作り、その中間を補完してくいくという考え方にになります。

まずは、以下のようにボックス要素を作ったとします。

 

HTML

<div class=”box”></div>

 

CSS

.box {
  width: 50px;
  height: 50px;
  background: #1ab4d3;

これで、以下のようなボックスができますね。

 

ここで、CSSで擬似クラスの「:hover」を使って、カーソルを当てると円形になるという宣言を入れてみます。

 

CSS

.box:hover {
  border-radius: 50px;

を加えればOKです。

四角形のカドを、半径50pxの円形にする、という命令ですね。

この結果、以下のように、ボックスにマウスを当てると円形に変わるようになります。

 

この時点では、これまで学んできた、単なる擬似クラスの挙動に過ぎませんね。

ということで、ここからはアニメーションの基本技を具体的にみていきましょう。

「擬似クラス」について復習したい方はこちら

セレクターの使い方まとめサイト【CSS初心者向け】 #6
CSSをの初心者向けに、使い方で迷いがちなセレクターについて基本的な内容をまとめてみました。 擬似クラス、擬似要素よるセレクターを中心にまとめていますので、サイト作成時に「う、何だったっけ？」となった時にこちらを振り返っていただければ見直せ...
www.fuwafuwa-af.com

transition-property

transition-propertyはよく使われるプロパティで、変化の途中を補完するためのプロパティです。

具体的には、CSSで、.boxに対して以下のように記述します。

 

CSS

.box {
  width: 50px;
  height: 50px;
  background: #1ab4d3;

  transition-property: border-radius;
  transition-duration: 1s;
}

.box:hover {
  border-radius: 50%;
}

この結果は以下のようになります。

先ほどの:hoverで擬似クラスを当てただけの場合よりも、1秒かけてゆっくりと円形に変化していることが分かりますね。

 

　Point　

このようにCSSアニメーションでは、

  1. 変化前のスタイルと変化後のスタイルを作り
  2. transition-propertyを使うことで
  3. その中間を補完する

というのが基本的な考え方になっています。

 

では、次に、要素を移動させたり、回転・縮小などをさせるプロパティを見ていきましょう。

 

transform

transformプロパティは、要素を移動・回転・拡大縮小・傾斜させることができるプロパティです。

transformは変化後のスタイルとして当てていくプロパティなので、宣言を入れる場所を間違えないように正確に覚えましょう。

transition-propertyは中間を補完するプロパティでしたね。

つまり、先ほどの例に当てはめると、「.box:hover」のプロパティにtransform:を指定するということになります。

まずは、以下のとおり、値の種類を覚えておきましょう。

 

　transformの値　

  • translate;　→　移動（translateX;、translateY;）
  • rotate;　→　回転（deg）
  • scale;　→　拡大・縮小（x方向、y方向）

 

transform: translate;

ではここで、translateという移動のプロパティを使った具体例をみてみます。

生成されたボックスにポインターを当てると、右に50px、下に30px移動するように記述しています。

ここのところを、分解して少し詳しく説明してみます。

 

CSS

.box:hover {
  transform: translate(50px, 30px);
}

この構文により、

  • ポインターをホバーしたら
  • x方向に（右に）50px移動
  • y方向に（下に）30px移動

と変化後のスタイルの指示を入れています。

そして、次の構文の最後の2行のところで、transform: に関する挙動の中間補完をしていることになっています。

 

CSS

.box {
  width: 50px;
  height: 50px;
  background: #1ab4d3;

  transition-property: transform;
  transition-duration: 1s;
}

 

rotate、scale、組み合わせなど

以下の4つのパターンを例として挙げてみます。

構文をよく考察して、4つの違いと特徴をよく見極めて、使いこなせるようにしておきましょう。

  1. rotateを使ったパターン（BOX. 1）
  2. scaleを使ったパターン（BOX. 2）
  3. translateXとrotateを組み合わせたパターン（BOX. 3）
  4. 3.を逆に設定したパターン（BOX. 4）

 

transform-origin:

rotate:を使用した場合は、回転する基点を操作することができます。

初期値は上で見た例のとおりで、図形の中心を基点にして回転します。

これを例えば、

  • 図形の右下を起点としたい場合は「transform-origin: bottom right;」
  • 図形の左上を起点としたい場合は「transform-origin: top left;」

といったように指定すればOKです。

具体例は以下のとおりです。

transform-originは中間を補完するプロパティなので、宣言を入れる場所を間違えないように正確に覚えましょう。

 

　Point　

transform-originは、rotate（回転）とscale（拡大・縮小）に使用できます。translate（移動）には効果が生じません。

 

中間を補完する

アニメーションの基本的な考え方は、変化前のスタイルと変化後のスタイルを作り、その中間を補完してくいくということを、これまでに何回か説明してきました。

この説明はつかみどころのない表現ではありましたが、ここまで見てくると徐々に理解できてきたのではないかと思います。

とはいえ、重要な点でもありますので、もう一度実例を挙げて補足してみます。

まず、以下のように、BOX. 1を、1秒かけて180度回転させる状態の記述があったとします。

ここで、変化後に背景色も変える設定をする場合は、「.box1:hover」に 「background: pink;」を設定すればOKですね。

具体的にはこうなります。

ですが、見てのとおり、変化の中間の設定がないために、いきなり色が変わっていることが分かります。

そこで、 中間を補完して、1秒かけて色が徐々に変わるようにするために、「background」プロパティを「transition-property」に認識させる設定をして、「background」にtransition効果を適用させる、というロジックを作ることになるわけです。

具体的に見ると以下のとおりです。

「transition-property: transform, background;」と、2つ以上ある場合は「,」（カンマ）区切りで設定します。

また、複数ある場合は「transition-property: all;」として一括指定することも可能です。

クリックアイコンの例

同じように、別の例でもみておきましょう。

以下のように記述して、クリックアイコンを作ったとします。

 

HTML

<span class=”btn”>ここをクリック！</span>

 

CSS

.btn {
  padding: 16px 32px;
  background: hsl(190, 78%, 46%);
  color: #fff;
  border-radius: 10px;
  box-shadow: 10px 7px 5px silver;
  cursor: pointer;
}

これで、以下のようなボタンができますね。

ここをクリック！

これに対して、このボタンにポインターをホバーしたら、0.5秒かけてボタンを明るくする、といった効果をつけてみると、以下のようになります。

変化後の「.btn:hover」に対して、「transition: background: .5s;」で中間を補完する動きを加えた形になっています。

 

transition-delay

transition-delayは中間を補完するプロパティで、これを使うとアニメーションの開始時間を遅らせることができるようになります。

上で見た例に、「transition-delay: 1s;」として、アニメーションの開始時間を1秒遅らせる設定してみた例は以下のとおりです。

ボックスにポインターをホバーすると、

  • 1秒経ってから
  • 1秒かけて
  • 180度回転しつつ
  • 色がピンクに

変化していくことが分かりますね。

 

transition-timing-function

transition-timing-functionは、アニメーションの速度に緩急をつけることができるプロパティです。

「transition-timing-function: ease-in-out;」として設定した例を見てみましょう。

「ease-in-out」を使うことで、動き始めと終了間際の速度が遅くなっていることが分かります。

 

cubic bezier editor

transition-timing-functionについては、その他の値も色々とありますが、chromeブラウザのデベロッパーツールを使うと便利なので、ここで紹介しておきます。

devtoolsを開いて、stylesにあるtransition-timing-functionのところを確認すると、「cubic bezier editor」アイコンが表示されています。

それをクリックすれば、小ウィンドウが開いて、色々と直感的にアニメーションの値を操作して確認できます。

このcubic bezier editorを使うと、devtool上で試した値をそのまま使って「transition-timing-function: cubic-bezier(0.55, 0.51, 0.58, 1);」といったように自分好みの設定にカスタマイズすることもできます。

便利なので覚えておきましょう。

一応画像を入れておきます。

devtoolsの画像

devtoolsの画像

Chrome Developper toolsのことがよくわからない方は、Chrome上で右クリックして「検証」を選択すれば、上の画像の画面が開きます。

 

transition-propertyの一括指定

transition-propertyは、「transition」というプロパティで一括指定することができます。

例えば、以下のような記述があったとします。

 

CSS

.box1 {
  width: 50px;
  height: 50px;
  background: #1ab4d3;

  transition-property: transform, background;
  transition-duration: 2s; 
  transition-timing-function: ease-in-out;
  transition-delay: 0.5s;
}
 
.box1:hover {
  transform: translate(50px);
  background: pink;

これを一括指定の「transition」と使うと以下のような記述になります。

 

CSS
.box1 {
width: 50px;
height: 50px;
background: #1ab4d3;

transition: transform 2s ease-in-out .5s, background 2s ease-in-out .5s
}

.box1:hover {
transform: translate(50px);
background: pink;
}

一括指定の際の留意点は以下のとおりです。

 

　　「transition」一括指定の際のPoint　

  • 「transition」プロパティの値として、順不同で、半角スペース区切りで並べればOKです。
  • 時間に関する値は「0.5」であれば「.5」として「0」を省略することが可能です。
  • 時間に関する値は、先に書いた方が「transition-duration」、後に書いた方が「transition-delay」を意味することになります。
  • 複数のpropertyを並べる場合は「,」（カンマ）で区切ります。上の例だと、2つ目のpropertyのbackgroundの前に「,」が入ります。

まとめ

以上、CSSにおけるアニメーション操作の基本について見てきました。

この基本が理解できると、次は@keyframesという手法で、より詳細に効果を入れることが簡単にできるようになります。

@keyframesについてまとめたサイトもありますので（タグメニュー「CSS」にあります）、是非一度見てみてください。きっと理解が深まりまることと思います。

皆さんのお役に立てれば幸いです！

 

自宅で学べるオンラインスタイルの「TECH CAMP」で無料カウンセリングやってます！

TECH CAMPの広告リンク画像

 

併せて読みたい

» プログラミング関連記事

» ワードプレス関連記事