HTML,CSSだけで作れる画像アニメーションないかな?という方向けに完全オリジナルの画像アニメーションを作ってみました
ふたご
今回は複数の画像が回転・サイズ拡大/縮小するCSSアニメーション3つご紹介。transformプロパティ(transform:scale×rotate)で画像サイズが拡大+回転します。HTML, CSSだけ。解説付きです
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
まずは動きを確認してみてください(これがコピペOKなのかと驚くはず)
Webデザインやフロントエンド初心者の方はWebデザイナー3ヶ月独学ロードマップを読んでから学習してもらえれば失敗しないと思います。
ふたご
この記事の目次
【回転×サイズ拡大/縮小】CSS画像アニメーション3選『解説付』
1. hoverで回転×拡大する画像アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
POINT
- 画像を複数用意し中央に配置する
- 各々のwidth, heightを%表記としレスポンシブ対応
- hover前後のtransform: scale() rotate()を調整することで画像サイズの拡大・縮小 / 回転角度を調整
- hover前後のopacityを調整しhoverされた画像のみを強調
- transitionで滑らかなアニメーションを実現
2. hover前後でサイズが拡大・縮小×回転する画像アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
POINT
- 画像を複数用意し中央に配置する
- 各々のwidth, heightを%表記としレスポンシブ対応
- hover前後のtransform: scale() rotate()を調整することで画像サイズの拡大・縮小 / 回転角度を調整
- hover前後のopacityを調整しhoverされた画像のみを強調
- transitionで滑らかなアニメーションを実現
3. 回転×拡大でギャラリーのように一覧表示される画像アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
POINT
- 画像を複数用意し中央に配置する
- 各々のwidth, heightを%表記としレスポンシブ対応
- hover前後のtransform: scale() rotate()を調整することで画像サイズの拡大・縮小 / 回転角度を調整
- hover前後のopacityを調整しhoverされた画像のみを強調
- transitionで滑らかなアニメーションを実現
【初心者向け】失敗しないプログラミングTIPS
そもそもWebデザインの基礎がわからない。。
そんなあなたには『Udemy』
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたには『ProEngineer』
完全無料で一人前のエンジニアになれるプログラミングスクール【ProEngineer】