フリーランス｜WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 I R O D O R I D ESIGN
【CSSアニメーション】画像や要素を回転させる方法 RELEASE / 2024.5.16 UPDATE / 2024.05.16 @keyframes CSSアニメーション 回転 無限ループ一昔前まではWebサイトでアニメーションを表現する場合、JavaScriptやjQueryを使って表現することが一般的でした。しかし、CSS3になりCSSだけでアニメーションを表現出来るようになって、Webサイトはますます華やかなアニメーションのWebサイトが作られるようになりました。
この記事ではCSSアニメーションを使って画像や要素を回転させる方法をご紹介したいと思います。
この記事の目次を表示
- 1 画像や要素を回転させる方法
- 1.1 1回だけ回転させる方法
- 1.2 回転を無限ループさせる方法
- 2 まとめ
画像や要素を回転させる方法
CSSアニメーションを使って画像や要素を回転させる場合、animationプロパティを使います。animationプロパティに4つの引数を指定することで簡単に画像や要素を回転させるアニメーションを実装することが出来ます。
animation: アニメーション名 1回のアニメーション時間 イージング効果 アニメーションを繰り返す回数;ここにそれぞれの値を指定することで様々なアニメーションを表現することが出来ます。
それでは画像や要素が回転する色んなCSアニメーションを見ていきましょう。
1回だけ回転させる方法CSSアニメーションで1回だけ画像や要素を回転させる方法はこちら。
.item{ animation: rotateAnimation 2s linear 1; } @keyframes rotateAnimation{ from { transform: rotate(0deg); } to{ transform: rotate(360deg); } }第1引数のrotateAnimationはアニメーション名。その下の@keyframes rotateAnimation{ ... }のCSSアニメーションを指定しています。
第2引数の2sは1回のアニメーション時間。2sなので1回のアニメーションは2秒で完了するように指定しています。
第3引数のlinearはイージング効果。linearは緩急をつけず一定速度でアニメーションするように指定しています。
第4引数の1はアニメーションを繰り返す回数。1なのでアニメーションは1回だけ実行されるように指定しています。
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
回転を無限ループさせる方法 一定速度で回転させるCSSアニメーションを使って一定速度で画像や要素を無限ループで回転させる方法はこちら。
.item{ animation: rotateAnimation 2s linear infinite; } @keyframes rotateAnimation{ from { transform: rotate(0deg); } to{ transform: rotate(360deg); } }この場合、第3引数のイージング効果を一定速度のlinear、第4引数にinfiniteを指定します。アニメーション回数をinfiniteと指定することで無限ループさせることが出来ます。それ以外は先ほどの例と同じです。
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
緩急をつけて回転させる緩急をつけて回転させる場合、animationプロパティのイージングを指定する第3引数のlinearを変更します。そして第4引数はinfiniteを指定します。
こちらのサンプルではイージング効果をease-in-outにしています。
.item{ animation: rotateAnimation 2s ease-in-out infinite; } @keyframes rotateAnimation{ from { transform: rotate(0deg); } to{ transform: rotate(360deg); } }実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
まとめ
いかがでしたか？CSSアニメーションを使うことで簡単に要素を回転させるアニメーションを作ることが出来ました。Webページのさりげないアクセントに導入してみてはいかがでしょうか？
関連記事一覧
【jQuery】slickスライダーのページャーをメーターにカスタマイズする方法WEBサイトでスライドショーを作成する際、よく使用するスライダープラグインのslick。デフォルトのオプション機能にペー […]
【テクニック】CSSで半円・縁取り・弧を作る方法CSSは様々な形を作ることが出来ます。正円はもちろん、半円、縁取りの半円、半円の弧の部分などデザイナーが作るデザインに合 […]
【コピペ】CSSで矢印を作る方法／サンプルコードCSSを使うと様々な図形を表現することが出来ます。知らないとついつい画像やSVG処理で対応してしまう図形。今回の記事では […]
【background-image】CSSだけでストライプ（ボーダー）を作る方法デザイナーが作ったデザインに変わった模様の背景があった場合、画像として表示しますよね。しかし、中には知らなければついつい […]
【CSS】各プロパティの初期値一覧CSSを使用している際、プロパティの値を初期値に戻したいと思うことが多々あります。このプロパティの初期値って何だったかな […]
【タグ解説】pタグの意味や使い方HTMLタグの中でも使用頻度の高いタグのpタグ。普段何気なく使用しているこのpタグですが、このタグはどんなタグでどのよう […]
【background-image】CSSだけでストライプ（ボーダー）やドット模様を作るサンプル集CSSのbackground-imageを使うことでストライプ（ボーダー）やドット模様など意外と色んな背景模様を作ること […]
【Contact Form 7】出力されるHTMLタグ構造のまとめWordPressでお問い合わせフォームを作成する際に使用する人気プラグインの「Contact Form 7」。このプラ […]
【CSS】position:fixed;が効かない原因と解決方法CSSの配置を設定出来るプロパティのposition。このうち、fixedを指定するとその要素は画面に固定され、スクロー […]
【CSS】filterプロパティを使って画像を加工する方法画像をぼかしたりグレースケールにしたり彩度を上げたり、何かしら画像を加工したい場合、PhotoShopなどの画像加工ソフ […]
【jQuery】Slickスライダーで拡大しながら切り替わるスライダーの作り方この記事の目次を表示1 【jQuery】Slickスライダーで拡大しながら切り替わるスライダーの作り方1.1 実装例1. […]
【API不要】Googleマップの色をCSSで変更する方法Googleマップの色を変更したり、ピンをロゴに変更したりする場合、Google Maps APIを使用することで様々な […]