「CSS」transitionアニメーションのゆっくりから加速(ease-in)サンプル

2022年3月15日2022年3月16日

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

CSS

Posted by arkgame

関連記事: