cssのkeyframesをつかって、要素や画像に対して、ふわふわ上下・左右に移動する動きや、ゆらゆら揺れる動き、ゆっくりズームするなどのアニメーション・動きをつけるサンプルを7種類紹介します。
今回は、画像にアニメーションを付けたいのでimgタグにkeyframesを付けていきます。
JavaScriptは使用していません。
もくじ
css関連記事
レスポンシブ対応がカンタンに!CSS aspect-ratioプロパティの使い方
jQuery UIのsortableを使ってリストをドラッグで並び替える
HTMLのsvgタグとJavaScriptで円グラフの画像をつくる
select・optionタグをjQueryで、プルダウンの選択値を取得、変更する
placeholderを見やすく!jQuery+css3でつくるフローティングラベル
効率よくセレクタを指定してcss効かせるサンプル!21選
楽天スマホで使える!classを使わずにcssを適用する裏技
cssのkeyframesで画像に動きや変化のアニメーションをつけるサンプル7種類
cssで要素に動きや変化をアニメーションでつける、keyframesの使い方
keyframesの使い方
keyframesの使い方は、cssのkeyframesを使って要素に動きや変化をアニメーションでつけるで紹介しています。

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
で奥に回転させて縮まっているように見せ、ジャンプしてる感をだしています。
ちょっとした動きだけでも雰囲気を作り出せますね!
コメント