[CSS]transitionアニメーションの一定の速度で変化(linear)サンプル

2014年4月24日2022年3月15日

環境
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」ボックスの中に置くと、ボックスが横に一定の速度で広がります。

CSS

Posted by arkgame

関連投稿: