notejQuery、php、css、wordpress、Excel、リザーブストックなどweb系の知識中心のnoteです。2018.04.11プロモーションが含まれていますcssのkeyframesをつかって、要素や画像に対して、ふわふわ上下・左右に移動する動きや、ゆらゆら揺れる動き、ゆっくりズームするなどのアニメーション・動きをつけるサンプルを7種類紹介します。今回は、画像にアニメーションを付けたいのでimgタグにkeyframesを付けていきます。JavaScriptは使用していません。関連記事をもっとみるkeyframesの使い方keyframesの使い方は、cssのkeyframesを使って要素に動きや変化をアニメーションでつけるで紹介しています。今回、imgタグにアニメーションを付けてみます。1.5s;}htmlとcssは、上記をベースに動かしていきます。0px;で指定すると滑らかに動かずにカクカクします。absolute;は使わない方がよさそうです。なにかわかりませんが、画像の端に残像?みたいなのも出ていますね。absolute;とは別の方法です。translate()で、上下・縦方向に動きを付けているので滑らかに動いています。わかりにくいですが、見比べてみてください。することで、上下にふわふわと動くアニメーションが表現できます。1.5s;の時間を変更すると、お好みのかわいい感じにカスタマイズできますよ。0);で左右・横方向に変更しているので、横に動くようになります。することで、左右にふわふわと動くアニメーションが表現できます。rotate();で画像を左右に傾けることで、ゆらゆら揺れる感を出しています。5s;で速度を遅くしています。rotate();の数値でアニメーションで傾き加減を調整してあげれば完成です。rotate()でくるくると回転させています。normal;で、アニメーションを右方向へずっとループさせています。linear;で、アニメーションのタイミングを「一定」で上書きしています。scale(1,1);)に戻すことで、ゆっくりズーム・ズームアウトさせています。}}ベースが「5.画像がゆっくり拡大縮小するアニメーション」のcssを利用しています。scale;の縮小・拡大のアニメーションを、こまかいフレームで繰り返し、ぽよぽよ感が表現しています。translate;で上下に動かし、rotateXで奥に回転させて縮まっているように見せ、ジャンプしてる感をだしています。1;でゆっくりフェードインするようにしています。1;とtranslateX(0);でゆっくり元の位置にスライドインするようにしています。scale(1);でゆっくり元のサイズにズームインするようにしています。これで横方向の中央寄せができます。サンプルはこちらから。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。absoluteで動かすとカクカクする1.画像が上下にふわふわ動くアニメーション2.画像が左右にふわふわ動くアニメーション3.画像が左右にゆらゆら揺れるアニメーション4.画像がくるくる回るアニメーション5.画像がゆっくり拡大縮小するアニメーション6.ぽよぽよ拡大縮小するアニメーション7.ジャンプするアニメーション8.フェードインするアニメーション9.スライドインするアニメーション10.ズームインするアニメーションタイトルとURLをコピーしました。