cssのkeyframesで画像に動きや変化のアニメーションをつけるサンプル10選

2018.04.11
プロモーションが含まれています

cssのkeyframesで画像に動きや変化のアニメーションをつけるサンプル7種類

cssのkeyframesをつかって、要素や画像に対して、ふわふわ上下・左右に移動する動きや、ゆらゆら揺れる動き、ゆっくりズームするなどのアニメーション・動きをつけるサンプルを7種類紹介します。

今回は、画像にアニメーションを付けたいのでimgタグにkeyframesを付けていきます。
JavaScriptは使用していません。

css関連記事

関連記事をもっとみる

keyframesの使い方

keyframesの使い方は、cssのkeyframesを使って要素に動きや変化をアニメーションでつけるで紹介しています。

cssで要素に動きや変化をアニメーションでつける、keyframesの使い方
cssで要素に動きや変化をアニメーションでつける、keyframesの使い方css関連記事今回、imgタグにアニメーションを付けてみます。htmlkeyframesの使い方cssanimation_testがアニメーションの名前を任意でつけ...
mugenweb-note.com
2018.04.10

html・cssの記述

html

<img src="./star.svg" class="keyframe0 animation">

共通css

.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

htmlとcssは、上記をベースに動かしていきます。

position: absoluteで動かすとカクカクする

See the Pen
by むぅ (@mugenweb)
on CodePen.0

css

.keyframe0{
  animation-name: anim_po;
  position: absolute;
}

@keyframes anim_po {
  0% {
    top: 0px;
  }
  100% {
    top: 15px;
  }
}

画像を移動させるときにposition: absolute;からのtop: 0px;で指定すると滑らかに動かずにカクカクします。
画像を上下・左右に動かしたいときにはposition: absolute;は使わない方がよさそうです。
なにかわかりませんが、画像の端に残像？みたいなのも出ていますね。

1.画像が上下にふわふわ動くアニメーション

See the Pen
by むぅ (@mugenweb)
on CodePen.0

css

.keyframe1{
  animation-name: anim_v;
}

@keyframes anim_v {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, 60px);
  }
}

「position: absoluteで動かすとカクカクする」では、position: absolute;とは別の方法です。

transform: translate()で、上下・縦方向に動きを付けているので滑らかに動いています。
わかりにくいですが、見比べてみてください。

こうすることで、上下にふわふわと動くアニメーションが表現できます。

動きがわかりやすいように、60pxにしてありますが値を小さくしたり、共通cssのanimation-duration: 1.5s;の時間を変更すると、お好みのかわいい感じにカスタマイズできますよ。

2.画像が左右にふわふわ動くアニメーション

See the Pen
by むぅ (@mugenweb)
on CodePen.0

css

.keyframe2{
  animation-name: anim_h;
}

@keyframes anim_h {
  0% {
    transform: translate(0px, 0);
  }
  100% {
    transform: translate(30px, 0);
  }
}

「1.画像が上下にふわふわ動くアニメーション」のcssをtransform: translate(30px, 0);で左右・横方向に変更しているので、横に動くようになります。
こうすることで、左右にふわふわと動くアニメーションが表現できます。

3.画像が左右にゆらゆら揺れるアニメーション

See the Pen
by むぅ (@mugenweb)
on CodePen.0

css

.keyframe3{
  animation-name: anim_s;
  transform: rotate(30deg);
  animation-duration: 5s;
}

@keyframes anim_s {
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

transform: rotate();で画像を左右に傾けることで、ゆらゆら揺れる感を出しています。

デフォルトの速度では、ゆらゆら揺れるっぽくないので、animation-duration: 5s;で速度を遅くしています。

あとは、transform: rotate();の数値でアニメーションで傾き加減を調整してあげれば完成です。

4.画像がくるくる回るアニメーション

See the Pen
by むぅ (@mugenweb)
on CodePen.0

css

.keyframe4{
  animation-name: anim_r;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-direction: normal;
}

@keyframes anim_r {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

transform: rotate()でくるくると回転させています。

共通cssでは、animation-direction: normal;のままだと、「奇数回では普通方向の再生、偶数回では逆方向の再生」となるため、右方向に1周した後、左方向に回転を始めるため、animation-direction: normal;で、アニメーションを右方向へずっとループさせています。

また、アニメーションの進行タイミングを指定している、animation-timing-function: ease-in-out;だとアニメーションが「ゆっくり始まってゆっくり終わる」ので、
animation-timing-function: linear;で、アニメーションのタイミングを「一定」で上書きしています。

5.画像がゆっくり拡大縮小するアニメーション

See the Pen
by むぅ (@mugenweb)
on CodePen.0

css

.keyframe5{
  animation-name: anim_sc;
  transform: scale(0.85,0.85);
}

@keyframes anim_sc {
  100% {
    transform: scale(1,1);
  }
}

画像サイズの初期値をtransform: scale(0.85,0.85);で縮小しておいて、アニメーションで通常の画像サイズ（transform: scale(1,1);）に戻すことで、ゆっくりズーム・ズームアウトさせています。

6.ぽよぽよ拡大縮小するアニメーション

See the Pen
by むぅ (@mugenweb)
on CodePen.0

css

.keyframe6 {
  animation-name: poyopoyo;
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

ベースが「5.画像がゆっくり拡大縮小するアニメーション」のcssを利用しています。
ぽよぽよ感を出すためにtransform: scale;の縮小・拡大のアニメーションを、こまかいフレームで繰り返し、ぽよぽよ感が表現しています。

7.ジャンプするアニメーション

See the Pen
by むぅ (@mugenweb)
on CodePen.0

css

.keyframe7 {
  animation-name: jump;
  animation-duration: .6s;
}

@keyframes jump{
  0%   { transform:translate(0%, 60px) rotateX(50deg); }
  100% { transform:translate(0%, 0%); }
}

transform: translate;で上下に動かし、rotateXで奥に回転させて縮まっているように見せ、ジャンプしてる感をだしています。

8.フェードインするアニメーション

See the Pen
Untitled by むぅ (@mugenweb)
on CodePen.0

css

.fadein {
  animation-name: fadeIn;
  animation-direction: normal;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

opacity: 0;で透明にして、opacity: 1;でゆっくりフェードインするようにしています。

9.スライドインするアニメーション

See the Pen
Untitled by むぅ (@mugenweb)
on CodePen.0

css

.slidein {
  animation-name: slidein;
  animation-direction: normal;
}

@keyframes slidein {
  0% {
    transform: translateX(120px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  50%,100% {
    opacity: 1;
  }
}

まずopacity: 0;とtranslateX(120px);で透明、右に配置にして、opacity: 1;とtranslateX(0);でゆっくり元の位置にスライドインするようにしています。

10.ズームインするアニメーション

See the Pen
Untitled by むぅ (@mugenweb)
on CodePen.

css

.slidein {
  animation-name: zoomin;
  animation-direction: normal;
}

@keyframes zoomin {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

まずopacity: 0;とtransform: scale(0.8);で透明、縮小して、opacity: 1;とtransform: scale(1);でゆっくり元のサイズにズームインするようにしています。

ちょっとした動きだけでも雰囲気を作り出せますね！

コメント

タイトルとURLをコピーしました