CSS动画之transition与transform：灵动的视觉盛宴

前端

2023-12-20 09:18:52

在CSS的世界里，animation（动画）是一场视觉盛宴，而transition（过渡）和transform（变换）则是舞台上的两位主角。他们联袂演出，为我们呈现出千变万化的动画效果，带我们走进一个充满动感的数字世界。

1. Transition：过渡的艺术

transition属性，顾名思义，它控制着元素从一种状态过渡到另一种状态的速度和效果。通过设置transition属性，我们可以让元素在改变样式时以平滑、渐变的方式进行，而不是突兀地改变。

transition属性包含三个关键属性：

transition-property：指定要过渡的CSS属性，例如，可以是color、background-color、width或height等。
transition-duration：指定过渡持续的时间，单位是秒或毫秒。
transition-timing-function：指定过渡的效果，有linear（线性）、ease（缓入缓出）、ease-in（缓入）、ease-out（缓出）等多种选项。

2. Transform：变换的魔术

transform属性是一把魔术棒，它可以将元素进行平移、旋转、缩放、扭曲等各种变换。通过使用transform属性，我们可以创建出令人惊叹的动画效果，让元素在页面上翩翩起舞。

transform属性包含多个子属性，每个子属性对应一种特定的变换类型：

translate()：平移元素
rotate()：旋转元素
scale()：缩放元素
skew()：扭曲元素

3. Transition与Transform携手共舞

当transition与transform携手共舞时，它们便能创造出令人叹为观止的动画效果。我们可以使用transition属性来控制transform属性的变化速度和效果，让元素在变换过程中呈现出平滑、优美的过渡。

例如，我们可以使用以下代码让元素从左上角平移到右下角，并同时旋转180度：

.element {
  transition: transform 1s ease-in-out;
  transform: translate(100px, 100px) rotate(180deg);
}

在这个例子中，transition属性设置了元素从一种状态过渡到另一种状态的持续时间和效果，而transform属性则定义了元素的变换方式。

4. 实战演练：打造一个炫酷的动画效果

现在，让我们将transition和transform属性结合起来，创建一个炫酷的动画效果。我们将创建一个按钮，当鼠标悬停在按钮上时，按钮会旋转45度，同时背景颜色会从蓝色过渡到红色。

.button {
  transition: transform 0.5s ease-in-out, background-color 0.5s ease-in-out;
  transform: rotate(0deg);
  background-color: blue;
}

.button:hover {
  transform: rotate(45deg);
  background-color: red;
}