快速提示：CSS 变换和过渡

无论您是否喜欢 CSS 动画，学习如何使用 CSS 变换和过渡都可以帮助您网站的整体用户体验。

让我们看看如何开始。

变换

CSS 中的 transform 属性使你能够在 2D 或 3D 中变换元素。用于更改元素的最常见变换是rotate、skew、translate和scale。

语法：

.rotate:hover {
  transform: rotate(10deg);
  /* transform: rotateY(90deg); */
  /* transform: rotateX(-90deg); */
}

旋转元素时，您可以同时沿 X 轴和 Y 轴旋转，也可以仅沿 X 轴或 Y 轴旋转。您还可以正向或负向旋转。

语法：

.skew:hover{
   transform: skew(-10deg)
/* transform: skew(-10deg, 20deg); */
/* transform: skewX(-10deg); */
/* transform: skewY(20deg); */
}

此属性用于在二维平面上倾斜元素。
有一个简写形式，可以使用一个值或两个值。
您也可以指定是否沿 X 轴或 Y 轴倾斜。skew
属性用于将元素向右或向左倾斜

语法：

.translate:hover {
  /* transform: translate(100px); */
  /* transform: translateX(100px); */
   transform: translateY(100px);
}

如果您想在网页上移动元素，可以使用translate属性。此属性可以左右、上下或上下移动元素。

注意：如果要将元素向上移动，请在 Y 轴上使用负数。当您第一次开始在 Web 上制作动画时，这可能会造成混淆。

语法：

.scale:hover {
  /* transform: scale(1.2); */
  /* transform: scale(1.2, 0.5); */
  /* transform: scaleX(2); */
     transform: scaleY(0.5);
}

scale 属性会根据值缩放元素。大于 1 的值会放大元素，小于 1 的值会缩小元素。理论上可以使用负数，但这会导致一些奇怪的变形。它不会缩放元素，而是垂直翻转元素。

上述所有示例都具有过渡属性。

变换会移动或改变元素的外观，而过渡则使元素平滑、逐渐地从一种状态转变为另一种状态。

上面例子中，如果没有 transition 属性，我使用的变换会很直接，而且很跳跃。你可以注释掉 img 元素上的 transition 属性，看看我的意思。

transition 属性是一个简写属性，用于表示最多四个与过渡相关的长写属性

此属性指定要应用过渡效果的 CSS 属性的名称。all如果您有多个要添加过渡效果的属性，也可以使用关键字。

img {
  transition-property: transform;
}

或者

img {
  transition-property: all;
}

此属性指定过渡发生的持续时间。
因此，如果您指定 1s（1 秒），则元素的过渡将在 1 秒内发生。

img {
  transition-duration: 1s; /* seconds */
}

或者

img {
  transition-duration: 200ms; /* milliseconds */
}

此属性可以极大地改变动画的外观。它可以应用内置的缓动效果，例如 ease-in，或者您可以定义 cubic-bezier 来实现更自定义的缓动效果。
如果您想尝试 cubic-bezier，这是一个很棒的网站。您也可以在 MDN 上
试用各种缓动效果。

img {
  transition-timing-function: ease-in; 
}

img {
  transition-timing-function: steps(6, end);
}

img {
  transition-timing-function: cubic-bezier(.17,.67,1,.29);
}

利用此属性，您可以指定属性更改和转换实际开始之间的延迟。

img {
  transition-delay: 0.5s; /* seconds */
}

或者

img {
  transition-delay: 300ms; /* milliseconds */
}

你可以像上面那样单独写出每个属性，也可以使用 transition 的简写形式。它看起来像这样。首先，定义 transition 属性，然后是持续时间、计时函数，最后是你可能想要的任何延迟。

img {
   transition: all 0.5s ease-in 1s;
}

您可以单独转换每个属性，也可以通过组合转换属性来制作更加令人兴奋的动画。

下面是一个示例，我将所有变换和过渡组合成悬停时的单个动画。

就我们的网站而言，您可以结合这些属性来创建有趣的动画或引导用户的注意力到网站的特定区域。

一个常见的用例是为按钮添加悬停效果。在这个例子中，我在按钮上添加了一个过渡效果，并结合了平移和缩放变换，以便在悬停时更引人注目。

现在就去亲自尝试一些动画吧，如果你这样做了，我很想看看你创造了什么！