こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります
clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション3選
動きは下の画像のような感じになります
1. 【ぼやけるアニメーション】clip path : polygon+filter : blur
2. 【美しいアニメーション】clip path : polygon+filter : grayscale contrast saturate
3. 【オーロラアニメーション】clip path : polygon+filter : grayscale saturate hue-rotate
【解説付き】マテリアルデザインをコピペで実装!CSSスライダーアニメーション6選(filter編)
動きは下の画像のような感じになります
1. hoverで画像が半透明に?超便利なスライダーアニメーション
2. hoverで画像の色が暴れ出すスライダーアニメーション
3. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション
絶対失敗しないナビゲーションメニューサンプル3選
動きは下の画像のような感じになります
1. シンプルだけど洗練されたスライダーアニメーション
2. blurでぼやけながらスライドするスライダーアニメーション
3. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
hoverで画像の色が暴れ出す!filter: hue-rotateとtransitionでCSSエフェクト3選
動きは下の画像のような感じになります
1. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト
2. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト
3. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト
CSSだけ!hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
動きは下の画像のような感じになります
1. 階段のように背景が現れるhoverエフェクト
2. 上からブロックが落ちてくるように背景が現れるhoverエフェクト
3. 斜め上からスクリーンのように背景が現れるhoverエフェクト
4. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト
hoverとtransitionでオシャレなCSS画像エフェクト4選!(背景がスっと表示される)
動きは下の画像のような感じになります
1. フワッと背景が現れるhoverアニメーション
2. 背景が徐々に画像全体へ広がるhoverアニメーション
3. 扉が閉まるように背景が現れるhoverアニメーション
4. 丸い背景が徐々に画像全体に広がるhoverアニメーション
【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション3選
動きは下の画像のような感じになります
1. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
2. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
3. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
【徹底解説】flexを応用して画像が伸縮するCSSアニメーション3選
動きは下の画像のような感じになります
1. flexで2つの画像が伸縮する画像アニメーション
2. flexでhoverした画像が100%拡大する画像アニメーション
3. filterでエフェクト+flexで3つの画像が伸縮する画像アニメーション
【flexboxのjustify−content:center4選】CSS画像アニメーションを画面中央に配置
動きは下の画像のような感じになります