CSSのアニメーションの基本と使い方

2020年12月24日2021年4月10日CSS

CSSのアニメーションを使えるようになることで、目を引くデザインや、より洗練された動きのあるWebサイトを作成できるようになります。

CSSアニメーションの基礎の知識をまとめたので、確認しておきましょう。

CSSアニメーションの考え方

まず、CSSアニメーションの基本的な考え方をおさえることで、スムーズに学習がすすむようになります。

CSSアニメーションの基本的な考えは、変化前と変化後の状態を作って、それをアニメーションのプロパティを使って補完するというものです。
アニメーションをつけるときに使うプロパティは、以下の通りです。

• transitionプロパティ
• animationプロパティ

transitionプロパティの使い方

transformプロパティは、変化前から変化後に移行させることができるプロパティです。
よく使われるtransformプロパティの値には、以下の通りです。

• translate→移動
• rotate→回転
• scale→リサイズ

transitionプロパティのtranslateの使い方

translateの指定には、主に次のようなものがあります。

• translateXでX軸方向
• translateYでY軸方向
• translate(?,?)

• tranform: translateX(200px)→X軸方向に200px移動
• tranform: translateY(200px)→Y軸方向に200px移動
• transform: translate(150px, 300px)→X軸方向に150px移動、Y軸方向に300px移動

translate(?,?)で指定する場合、それぞれの?にはx軸,y軸で指定した方向に移動できます。

transitionプロパティのrotateの使い方

rotateは、30deg,60deg,90degなどの値を指定することで、その角度分回転させることができます。
degはdegreeの略で角度の度数(°)のことです。

• transform: rotate(30deg)→30度回転
• transform: rotate(90deg)→90度回転
• transform: rotate(180deg)→180度回転

transitionプロパティのscaleの使い方

Scaleを指定することで、アイテムのスケール(大きさ)を変更することができます。具体的には、次のようにして指定します。

• transform: scaleX(2)→X軸方向を2倍に拡大
• transform: scaleY(0.5)→Y軸方向を2分の1に縮小
• transform: scale(2, 0.5)→x軸方向を2倍に拡大して、Y軸方向を2分の1に縮小

0.5は2分の1を意味します。

transitionプロパティは値の複数指定が可能

transitionプロパティでは、上で紹介した値を複数指定することもできます。
ただし、各順番で挙動結果が変わるので、その点を確認して理解していきましょう。

次の値の指定の仕方では、同じ値を指定しているけれども挙動の結果が異なります。

tranform: translateX(150px) rotate(60deg);

translateX(150px)で移動した後で、rotate(60deg)を行う。

tranform: rotate(60deg) translateX(150px);

rotate(60deg)で移動した後で、translateX(150px)を行う。

また、デフォルトだと、起点は要素の中心となります。起点を変更したい場合、transform-originプロパティを使います。

transfor-origin: top left;

とすると左上が基準になる

transition-propertyプロパティの使い方

transition-propertyプロパティは、すべてを対象にするならallとすればOKですが、アニメーションさせたくなくものまでアニメーションしてしまうことがあるので、明示してあげるほうがいいでしょう。

transitionの時間関連のプロパティ

transitionで変化する時間を操作したり、変化が開始するまでの時間を制御することができます。
主に使うものは、次のプロパティです。

transition-durationプロパティはアニメーションが変化する時間を操作できます。

transition-delayプロパティはアニメーションが開始するまでの時間を操作できます。

transition-durationプロパティの時間は自由に決めることができますが、目安としてUI部品はだいたい0.3秒がいいとちょうどいいと言われています。

迷ったら0.3にしよう。

0.3秒を指定するときは、次のどの書き方でもOKです。

• 0.3
• 0.3s
• .3s

transition-timing-functionで動き方を調整する

transition-timing-functionプロパティは、動き方を調整することができます。
主なものに次のような値があります。

• ease
• ease-out
• ease-in-out
• linear

easeは、既定値です。最後にゆっくりとなります。
ease-outは、アラートなど小さな部品によく使われます。最後にゆっくりとなります。
ease-in-outは、大きな部品に使われることが多いです。最初と最後がゆっくりとなります。
linearは、回転する部品など機械的な動きを出したいときに使います。一定速度がよい、読み込み中のマークなど。

transition一括指定プロパティ

transitionプロパティでは、次のプロパティを一括で指定することが可能です。
たとえば、次の指定の意味をみていきましょう。

transition: transform .5s ease-in;

これは、次のことを意味しています。

transition-property: transform;
  transition-duration: .5s;
  transition-timing-function: ease-in;

transition-delayの値も合わせて書く場合は、2つ目の数字をdurationの値の後に書きます。
時間を2つ書くと、最初がduration、2つ目がdelayになると理解しておきましょう。

transition: transform .3s ease-out 1s;

さらに、backgroundを足すならカンマ(,)で区切ってあげればOKです。

transition: transform .3s ease-out 1s, background .5s;

animationプロパティの考え方

transitionプロパティは、変化前と変化後の状態を書き、その移行の処理をかくというものでした。
しかしこの方法ではその間に他の変化を加えることができません。
そこで登場するのが、animationプロパティです。

animationプロパティを使うと、変化前と変化後だけでなく、keyとなる値を使って、変化途中の好きなところでアニメーションを加えることができます。
transitionプロパティと違って、繰り返したりすることもできる点もメリットです。

animationプロパティの使い方

animationプロパティでは、まずはkeyframesをアニメーションの名前を指定します。
そして、どの時点でどのアニメーションを加えるか書いていきます。
下の場合、changeという名前のアニメーションということになり、0%, 30%, 70%, 100%の時点でどう変化するかを指定しています。

@keyframes change {
0% { transform: ...; }
30% { transform: ...; }
70% { transform: ...; }
100% { transform: ...; }
}

>animationの設定

animation-nameプロパティでアニメーションの名前を指定することができます。

animation-durationプロパティでそのアニメーションの変化時間を指定できます。

animation-name: change;
animation-duration: 3s;

さらに、

animation-fill-mode: forwards;

とすると、終了した時点の状態のままおいておくことができます。

animaton-iteration-count: 2;

とすると、2回繰り返されます。

animaton-iteration-count: infinite;

とすると、無限に繰り返されます。

animation-direction: alternate;

変化した状態からもとに逆再生するなら、とします。いったりきたりさせることができます。

animation-direction: reverse;

とすると、逆の再生が繰り返されます。

animation-direction: alternate-reverse;

とすると、逆再生からのいったりきたりを繰り返すことができます。

animation一括指定プロパティ

animationプロパティも、次のように一括指定することができます。

animation-name: move;
animation-duration: 2s;
animaton-iteration-count: infinite;

上のものを一括指定したい場合、次のように書きます。

animation: move 2s infinite;

delayを加えるなら、transitionと同じで、durationの後の二番目に数字を指定すればOKです。

animationプロパティを使った参考例です。

.message {
  width: 400px;
  paddng: 10px 20px;
  background: #3d3d3d;
  color: #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
  position: fixed;
  right: 35px;
  bottom: 35px;
  animation: popup 3s forwards ease-out;
  
  @keyframes popup {
  0% {
  transform: translateY(30%);
  opacity: 0;
  animation-timing-function: ease-out;
  }
  20%, 80% {
  transform: none;
  opacity: 1;
  }
  100% {
  transform: translateY(30px);
  opacity: 0;
  }
  }