css transition

transition propaty

c.f.　https://www.asobou.co.jp/blog/web/css-animation3

transition: ①property ②duration ③delay ④timing-function

① property ：
　　　対象のCSSプロパティ　例；color display ・・・ all
② duration ：
　　　開始から終了までの時間　例：2s　500ms
③ delay ：
　　　開始するまでの遅延時間　例：2s　500ms
④timing-function ：
　　　変化の進め方の指定
　　　　ease：開始時と終了時にはゆっくり変化
　　　　ease-in-out：開始時と終了時にはeaseよりゆっくり変化
　　　　ease-in：開始時はゆっくり変化
　　　　ease-out ：了時にゆっくり変化
　　　　linear ：リニアー変化（一定スピード）
　　　　cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値) ：ベジェ曲線で変化　

ふんわりと円形ボタン表示　Circle Button transition effect

コード：https://codepen.io/hrt/pen/VBqvvY

円形ボタンにマウスオーバーすると、ボタンの色がふんわりと変わります。

transition timing function example

コード：https://codepen.io/hrt/pen/VwmMzxv
windowsの横幅により、バーの長さが変わります。