Help us understand the problem. What is going on with this article?

『まず触ってみて』Vueで使えるCSSアニメーションまとめ110選!【完全オリジナルだからコピペOK】

スクリーンショット 2020-07-25 15.40.27.png

コピペだけで作れるマテリアルデザインを個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

Webデザイナーに興味のある方はこちらも合わせてどうぞ↓
スクリーンショット 2020-08-08 16.41.27.png

1. シンプルなスライダーマテリアルデザイン3選

そのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image1.png

↓参考記事は下の記事です↓

qiita-material-design1.png

2. filterとopacityを使いこなすスライダーマテリアルデザイン3選

filterとopacityを使ったそのまま使えるスライダーアニメーションのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image2.png

↓参考記事は下の記事です↓

qiita-material-design2.png

3. transformを使用したスライダーアニメーション3選

translateやrotate、box-shadowも適宜使用することで様々な場面(Web制作やWebアプリケーションなど)で利用できるデザインになっています

qiita-slider-3d.png

↓参考記事は下の記事です↓

qiita-17.png

4. transform:scaleを使用したスライダーアニメーション3選

scaleでスライダー画像やナビゲーションボタンの拡大縮小を行いそれに対してアニメーションを使用しており幅広く使えるものになっています

qiita-slider-good.png

↓参考記事は下の記事です↓

qiita-18.png

5. clip path polygonを応用して2枚の画像を半々で表示するアニメーション3選

clip path polygonを応用して2枚の画像を半々(三角形)で表示するCSSアニメーション

それぞれに違った実務で使えるエフェクトがついています

qiita-clip-path-polygon.png

↓参考記事は下の記事です↓

qiita-19.png

6. hoverするとドロップダウン表示するナビゲーションメニュー3つ

hover(マウスオーバー)するとドロップダウン表示するナビゲーションメニューが3つ紹介されています

それぞれに違ったアニメーションがついていて面白いです

hover-animation-navigation-dropdown3.png

↓参考記事は下の記事です↓

qiita-20.png

7. 絶対失敗しないナビゲーションメニューサンプル3選

ナビゲーションメニューにいろいろなエフェクトがついていて使い勝手がいいです

カスタマイズもしやすいのでありがたいデザインです

matereal-design-navigation3.png

↓参考記事は下の記事です↓

qiita-21.png

8. 絶対失敗しないヘッダーデザインにコピペで使えるナビゲーションメニュー4選

ヘッダーデザインにコピペで使えるナビゲーションメニュー4選が紹介されていて、そのまま使えるマテリアルデザインなのでかなり重宝します

header-design-navigation-animation1.png

↓参考記事は下の記事です↓

qiita-22.png

9. 【まとめ】CSSだけで動きのあるナビゲーションバーデザイン3選

CSSだけで動きのあるナビゲーションバーデザイン3選が紹介されています

かなりシンプルなデザインですがシンプルだからこそ使える場所が多いと思います

navigation-bar-animation2.png

↓参考記事は下の記事です↓

qiita-23.png

10. filterエフェクトを使いこなすhoverアニメーション3選

filterエフェクトを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

qiita-material-image3.png

↓参考記事は下の記事です↓

qiita-material-design3.png

11. overflow: hiddenを使いこなす美しいCSSアニメーション3選

overflow: hiddenを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しい画像アニメーションとなっています

qiita-material-image4.png

↓参考記事は下の記事です↓

qiita-material-design4.png

12. position:absoluteとfilterを使いこなし鏡みたいに反射するアニメーション3選

position:absoluteとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

鏡みたいに反射する見ているだけで面白いアニメーションです

qiita-material-image5.png

↓参考記事は下の記事です↓

qiita-material-design5.png

13. filter: hue-rotateとtransitionを使いこなし色が暴れ出すアニメーション3選

filter: hue-rotateとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

色が暴れ出すかなり美しいデザインになっています

qiita-material-image6.png

↓参考記事は下の記事です↓

qiita-material-design6.png

14. filter:blurとtransitionを使いこなしぼかし画像が動き出すアニメーション3選

filter:blurとtransitionを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

qiita-material-image7.png

↓参考記事は下の記事です↓

qiita-material-design7.png

15. transitionとfilterを使いこなし美しく変化するCSS画像エフェクト5選

transitionとfilterを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

美しく変化するのを見るだけでも面白いです

qiita-material-image8.png

↓参考記事は下の記事です↓

qiita-material-design8.png

16. margin-leftとscaleを使いこなすスライドアニメーション16選

margin-leftとscaleを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

transform:scaleを使っていてわかりやすく説明もされているのでかなり重宝します

qiita-material-image9.png

↓参考記事は下の記事です↓

qiita-material-design9.png

17. hoverとfilter:brightnessを使いこなし明るさ調節するCSS画像エフェクト3選

hoverとfilter:brightnessを使いそのまま使えるhoverアニメーションのマテリアルデザインとなっています

filterを使いこなすためにはまずひとつひとつ丁寧にい理解していきましょう

qiita-material-image10.png

↓参考記事は下の記事です↓

qiita-material-design10.png

18. transformを使いこなすボタンアニメーション16選

transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します

css-effect-hover-button-transform-skew.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-02 16.02.15.png

19. transitionを使いこなすボタンアニメーション9選

transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです

hover-button-animation-color.png

↓参考記事は下の記事です↓

button-effects1.png

20. transformを使いこなすマテリアルデザイン5選

transformを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションでそのまま使えるマテリアルデザインとなっています

マテリアルデザインなのでそのまますぐにでもコピペして使用できます

css-effects-hover-button-materialdesign-3d.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-03 20.48.02.png

21. filterが網羅できるCSSボタンアニメーション15選

filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます

filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています

勉強にもフロント開発でも役立つと思います

hover-button-animation-filter.png

↓参考記事は下の記事です↓

button-effects2.png

22. scaleでオシャレなCSSボタンアニメーション3選

transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています

ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです

css-animation-button-diagonal.png

↓参考記事は下の記事です↓

button-effects3.png

23. ボタンでつくる回転アニメーション9選

transitionを使ってボタンが自然に回転します

ボタンが回転するって純粋に興味ありませんか?

回転扉みたいに動くんです

hover-animation-button-explain3.png

↓参考記事は下の記事です↓

button-effects4.png

24. filterとtransformで超動くCSSスライダーアニメーション3選【Web制作者必見】

filterプロパティの応用、transform:rotateの回転エフェクトとopacityで変化前後のスタイルを調整し

transitionで滑らかにスライドするアニメーションになります。

click-animation-sliders-3pickup-transform2-300x139.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-25 15.30.03.png

25. 【transform×回転『rotate』】CSS画像アニメーション3選

transitionを使って画像が自然に回転します

縦回転・横回転・3D回転で楽しめます

transform-rotate-image-animation1.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-25 15.33.10.png

26. transformとtransitionで実現!他にはない完全オリジナルのCSSアニメーション3選

transform:rotateで回転角度とscaleで伸縮率を調整し、

簡単な解説も付いているので手軽にカスタマイズできるようになっています。

hover-animation-image-onbackground-transform1-300x125.png

↓参考記事は下の記事です↓

スクリーンショット 2020-07-25 15.35.27.png

twinzvlog_yk
フロントエンドメイン/Vue.js/CSS/Rails/駆け出しエンジニアに向けてコピペだけで実装できるおもしろデザインメモ/気に入ったら使ってください/批判反論その他心ない行為を発見した場合は即座にブロックします
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした