【アニメーションCSS】画像の大きさや画像の形を変えていく方法

今回はcssで画像の大きさを徐々に大きくしたり画像の形を変えていくアニメーションの方法を紹介していきたいと思います。

アニメーションCSS
1. 画像を徐々に大きくする
  1. html
  2. css
2. 画像の形を変える
  1. html
  2. css
アニメーションの進行の指定

アニメーションCSS

まずcssアニメーションでよく使うのがkeyframesです。

keyframesを使うことでアニメーションの動きを指定することができます。

たとえば透過している要素を徐々に表示させたい場合は下記のようになります。

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

最初は0%の「opacity: 0;」から始まり50%の「opacity: 0.5;」で少しずつ透過が薄くなってきて100%になったら透過がなくなるアニメーションになります。

画像を徐々に大きくする

1つ目は画像を徐々に大きくするアニメーションになります。

html

<div class="anime-box">
  <img src="XXX.jpg" class="img-def" alt="">
</div>

css

cssは下記になります。

transformのscaleを使って画像をどんどん大きくしていきます。

@keyframes fadeDef {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.05, 1.05);
  }
  100% {
    transform: scale(1.1, 1.1);
  }
}

画像の形を変える

2つ目は画像の形を変えていくアニメーションになります。

html

<div class="anime-box1">
  <img src="XXX.jpg" class="img-def1" alt="">
</div

css

cssは下記になります。

こちらもtransformのscaleを使って画像の形を変化させています。

.anime-box1 .img-def1{
    opacity: 0;
    animation: fadeDef1 linear 2s forwards;
}

@keyframes fadeDef1 {
  0% {
    opacity: 0;
    transform: scale(1, .8);
  }
  25% {
    opacity: .5;
    transform: scale(.8, 1);
  }
  50% {
    opacity: .8;
    transform: scale(1, .8);
  }
  75% {
    opacity: 1;
    transform: scale(.8, 1);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

アニメーションの進行の指定

animation-timing-functionを指定することでアニメーションの進行の指定をすることができます。

上記では「linear」を指定しました。

「linear」は同じ速度でアニメーションが進行していきます。

値を変えてみて実際の画面で確認すると理解しやすいと思います。

それでは1つずつ見ていきましょう。

ease

アニメーションの中間にいくにしたがって変化の度合いが増えて最後にかけて度合いが減っていきます。

linear

同じ速度でアニメーションが進行していきます。

ease-in

アニメーションの変化の速度は最初はゆっくり始まっていき終了までに加速していきます。

ease-out

アニメーションの変化が速く始まって速度を落としながら動きます。

ease-in-out

ゆっくり変化していき、速度を上げたり速度を落としながら変化していきます。