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で画像に動きや変化のアニメーションをつけるサンプル10選
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
で奥に回転させて縮まっているように見せ、ジャンプしてる感をだしています。
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);
でゆっくり元のサイズにズームインするようにしています。
ちょっとした動きだけでも雰囲気を作り出せますね!
コメント