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