cssのkeyframesをつかって、要素や画像に対して、ふわふわ上下・左右に移動する動きや、ゆらゆら揺れる動き、ゆっくりズームするなどのアニメーション・動きをつけるサンプルを7種類紹介します。
今回は、画像にアニメーションを付けたいのでimgタグにkeyframesを付けていきます。
JavaScriptは使用していません。
もくじ
css関連記事
jQuery UIのsortableを使ってリストをドラッグで並び替える
HTMLのsvgタグとJavaScriptで円グラフの画像をつくる
select・optionタグをjQueryで、プルダウンの選択値を取得、変更する
placeholderを見やすく！jQuery+css3でつくるフローティングラベル
効率よくセレクタを指定してcss効かせるサンプル！21選
楽天スマホで使える！classを使わずにcssを適用する裏技
cssのkeyframesで画像に動きや変化のアニメーションをつけるサンプル7種類
cssで要素に動きや変化をアニメーションでつける、keyframesの使い方
SVG画像をcssのプロパティで色や大きさなどのスタイルを変更する
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で奥に回転させて縮まっているように見せ、ジャンプしてる感をだしています。
ちょっとした動きだけでも雰囲気を作り出せますね！
コメント