transition-timing-function 详解

发布时间 2025-08-12 16:21:51

阅读量加载中...

这个属性定义了动画的速度曲线，即动画在不同时间点的变化速率。

ease - 默认，慢快慢
linear - 匀速
ease-in - 慢开始
ease-out - 慢结束
ease-in-out - 慢开始和结束
cubic-bezier(n,n,n,n) - 自定义速度曲线

此演示仅在桌面端浏览器中可用

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .box {
        width: 50px;
        height: 50px;
        background-color: red;
        position: relative;
        left: 0;
        transition: left 2s;
      }
      .container:hover .box {
        left: calc(100% - 50px);
      }
      .ease {
        transition-timing-function: ease;
      }
      .linear {
        transition-timing-function: linear;
      }
      .ease-in {
        transition-timing-function: ease-in;
      }
      .ease-out {
        transition-timing-function: ease-out;
      }
      .ease-in-out {
        transition-timing-function: ease-in-out;
      }
      .custom {
        transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box ease">ease</div>
      <div class="box linear">linear</div>
      <div class="box ease-in">ease-in</div>
      <div class="box ease-out">ease-out</div>
      <div class="box ease-in-out">ease-in-out</div>
      <div class="box custom">custom</div>
    </div>
    <p>鼠标悬停在容器上，观察不同速度曲线的区别</p>
  </body>
</html>

#动画 #Css