「CSS」transitionアニメーションのゆっくりから加速(ease-in)サンプル
環境
Google Chrome 99.0.4844.51
書式
transition: width 数値1 ease-in数値2;
s:秒
ms:ミリ秒
ease-inを利用して、アニメーションはゆっくり>加速で変化します。
使用例
<!DOCTYPE html> <html> <head> <title>トランジション(transition)のease-inサンプル</title> </head> <style> .cft { background-color: skyblue; transition: width 2s ease-in 4ms; border: 1px solid black; width: 200px; } .cft:hover { width: 350px; } </style> <body> <div class="cft"><p>ゆっくり->加速サンプル</p></div> </body> </html>
実行結果
カーソルをDiv要素「cft」ボックスの中に置くと、ボックスが横にゆっくり>加速で広がります。