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