マウスオーバーなどシンプルなアニメーションをCSSで実装する時に利用します。
参考URL:mdn web docs
https://developer.mozilla.org/ja/docs/Web/CSS/transition
.anime {
width: 100px;
height: 50px;
background: orange;
transition-property: all;
transition-duration: 2s;
transition-delay: 0s;
transition-timing-function: ease;
}
.anime:hover {
width: 300px;
background: #ff0000;
}
簡単にCSSでグラデーションが作れます。直感的に作ることが可能で、中心地や扇形、斜めなど背景グラデーションが自由に作れます。
参考URL:Front-end Tools
画像や要素などに影をつけることができる、CSSのbox-shadowはとても簡単です。
参考URL:Front-end Tools
画像の上にカーソルを乗せた時、画像が大きくなるような動きをCSSアニメーションで実装することができます。
具体的にはtransformプロパティを使います。scale()は値です。
(例)transform: scale(1.6, 1.6) ・・・ 要素をx軸方向、y軸方向に1.6倍拡大する
【CSS】hover（マウスオーバー）で画像を拡大ズームする方法
参考URL：2024.10.4 じゅんぺいブログ
<<<<< その他 transformプロパティで指定できる関数 >>>>>
■rotate() 要素を回転させることができる関数
【transform:rotate()】要素を回転させることができる
■translate() 要素を移動させることができる関数
【transform:translate()】xy軸上の移動することができる
■scale() 要素を伸縮させることができる関数
【transform: scale(1.6, 1.6) 】要素をx軸方向、y軸方向に1.6倍拡大できる
■skew() 要素を歪ませることができる関数
【transform:skew()】要素に傾斜をつけることができる
CSSテスト2CSSテスト2CSSテスト2CSSテスト2CSSテスト2CSSテスト2CSSテスト2CSSテスト2CSSテスト2CSSテスト2CSSテスト2CSSテスト2
CSSテスト2CSSテスト2CSSテスト2CSSテスト2CSSテスト2CSSテスト2CSSテスト2
CSSテストCSSテストCSSテストCSSテストCSSテストCSSテストCSSテスト
CSSテストCSSテストCSSテストCSSテストCSSテスト
CSSテストCSSテストCSSテストCSSテストCSSテスト