「CSS」transitionアニメーションのerase変化のサンプル

2022年3月15日

環境
Google Chrome　99.0.4844.51

書式
transition: width 数値1 ease 数値2;
s:秒
ms:ミリ秒
easeを利用してアニメーションはゆっくり>加速>減速します

使用例

<!DOCTYPE html>
<html>
<head>
<title>トランジション(transition)のeaseサンプル</title>
</head>
<style>
  .cft {
    background-color: skyblue;
    transition: width 2s ease 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