今回は【画面中央に複数配置】transform scaleで動くCSS画像アニメーション4選(レスポンシブ)をご紹介。シンプルかつ洗練されたデザイン。それぞれ違うエフェクト。実務で使える。ポートフォリオにも最適。コピペOK。HTML, CSSだけ
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。詳しい説明付き
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
この記事の目次
【画面中央に複数配置】transform scaleで動くCSS画像アニメーション4選
1. transform scaleとopacityでシンプルな画像一覧アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- 画像を複数用意し中央に配置する
- 各々のwidth, heightを%表記としレスポンシブ対応
- hover前後のtransform: scaleを調整することで画像が拡大
- hover前後のopacityを調整しhoverされた画像のみを強調
- transitionで滑らかなアニメーションを実現
2. hoverした画像がtransform scaleで急拡大する画像一覧アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- 画像を複数用意し中央に配置する
- 各々のwidth, heightを%表記としレスポンシブ対応
- hover前後のtransform: scaleを調整することで画像が拡大
- hover前後のopacityを調整しhoverされた画像のみを強調
- transitionで滑らかなアニメーションを実現
3. transform scaleとfilter blurでぼやける画像一覧アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- 画像を複数用意し中央に配置する
- 各々のwidth, heightを%表記としレスポンシブ対応
- hover前後のtransform: scaleを調整することで画像が拡大
- hover前後のopacityとfilter(blur)を調整しhoverされた画像のみを強調
- transitionで滑らかなアニメーションを実現
4. transform scaleとfilter grayscale saturateで美しい画像一覧アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- 画像を複数用意し中央に配置する
- 各々のwidth, heightを%表記としレスポンシブ対応
- hover前後のtransform: scaleを調整することで画像が拡大
- hover前後のopacityとfilter(grayscale, saturate)を調整しhoverされた画像のみを強調
- transitionで滑らかなアニメーションを実現
参考
そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!
完全無料で一人前のエンジニアになれるプログラミングスクールあります