transition和transform结合实现平滑动画效果

原创

于 2024-11-13 11:35:56 发布 · 1.9k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

在CSS中，transition和transform可以结合使用，通过过渡效果来控制元素从一种状态平滑地变到另一种状态。transform用于对元素进行变换，比如旋转、缩放、平移等；transition则用于设置这些变换的过渡效果，比如持续时间、延迟等，使变换显得更自然和流畅。

一、`transform`属性

transform属性可以对元素进行二维或三维的视觉变换。常用的变换包括：

translate(x, y)：将元素在水平方向（x）和垂直方向（y）上移动指定的距离。
scale(x, y)：缩放元素，x和y分别表示水平和垂直方向的缩放比例。值为1表示不变，0.5表示缩小为原来的一半，2表示放大一倍。
rotate(angle)：将元素旋转指定的角度，angle为旋转角度，可以使用deg表示，比如rotate(45deg)表示旋转45度。
skew(x-angle, y-angle)：将元素在x轴或y轴上倾斜指定的角度。一般用于创建斜切效果。

示例：基础变换效果

在未加入transition之前，我们可以先看看transform的直接应用效果：

<style>
  .box {
     
     
      width: 100px;
      height: 100px;
      background-color: coral;
      /* 初始位置和大小 */
  }
  /* 鼠标悬停时应用的变换效果 */
  .box:hover {
     
     
      transform: scale(1.5) rotate(45deg) translateX(30px); /* 缩放1.5倍，旋转45度，右移30px */
  }
</style>

<div class="box"></div>