CSS 过渡示例——如何使用悬停动画、更改不透明度

「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」。

如果你正在使用 CSS、HTML 和 JavaScript 等 Web 技术，那么了解一些有关 CSS 动画和过渡的基本知识非常重要。

如何在悬停时为元素设置基本过渡动画

在此示例中，我们将在用户将鼠标悬停或鼠标悬停在元素上时更改元素的不透明度。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <style>
    .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
    }
    .elem:hover {
      opacity: 0.5;
    }
  </style>
  <body>
    <div class="elem"></div>
  </body>
</html>
复制代码

这是一个简单的过渡，可以在我们将鼠标悬停在元素上时触发。我们可以添加多个同时运行的转换。

让我们添加一个缩放转换属性来为元素添加缩放转换。

 .elem:hover {
      transform: scale(1.1);
    }
复制代码

但是过渡似乎并不顺利，因为我们没有定义过渡的持续时间，也没有使用任何计时函数。

如果我们添加transition属性，它将使元素移动更顺畅。

 .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
      margin: 20px auto;
      transition: 500ms linear; 
    }
复制代码

让我们分解一下过渡属性的工作原理：

 transition: 500ms linear;
复制代码

500ms: 过渡的持续时间，以毫秒为单位
linear: 计时功能

div {
    transition: <property> <duration> <timing-function> <delay>;
}
复制代码

我们可以添加更多选项，如下所示（来自MDN的示例）：

#delay {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}
复制代码

那么这段代码在做什么呢？

transition-property：你想要动画的属性。它可以是任何 CSS 元素，例如background, height, translateY, translateX, 等等。
transition-duration：过渡的持续时间
transition-delay：过渡开始前的延迟

您可以在此处了解有关transitionCSS中不同用途的更多信息。

如何使用动画属性和关键帧使过渡更具交互性

我们可以使用 CSS 过渡做更多的事情，让这个动画更有创意和互动。

如何使用关键帧移动元素

让我们看一个元素从 A 点移动到 B 点的示例。我们将使用 translateX 和 translateY。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <style>
    .elem {
      background: orange;
      width: 300px;
      height: 150px;
      animation: moveToRight 2s ease-in-out;
      animation-delay: 1000ms;
    }

    @keyframes moveToRight {
      0% {
        transform: translateX(0px);
      }
      100% {
        transform: translateX(300px);
      }
    }
  </style>
  <body>
    <div class="elem"></div>
  </body>
</html>
复制代码

这就是我们得到的：

这次我们使用了动画和关键帧等新属性。我们使用animation属性来定义动画名称和持续时间，关键帧让我们描述元素应该如何移动。

  animation: moveToRight 2s ease-in-out;
复制代码

我在这里为动画命名moveToRight——但你可以使用任何你喜欢的名字。持续时间是2s，并且ease-in-out是一个计时函数。

你可以使用其他计时功能，例如ease-in, linear，ease-out它们基本上可以使动画更流畅。你可以在此处了解有关计时功能的更多信息。

@keyframes取动画的名称。在这种情况下，它是moveToRight.

 @keyframes moveToRight {
      0% {
        transform: translateX(0px);
      }
      100% {
        transform: translateX(300px);
      }
    }
复制代码

keyframes将分多个步骤执行动画。上面的示例使用百分比来表示转换的范围或顺序。我们也可以使用fromandto方法。像下面“

 @keyframes moveToRight {
     from {
        transform: translateX(0px);
      }
     to {
        transform: translateX(300px);
      }
    }
复制代码

from表示动画的起点或第一步。

to是要执行的动画的终点或最后一步。

在某些情况下，您可能希望使用百分比。例如，假设你要添加两个以上将按顺序执行的转换，如下所示：

 @keyframes moveToRight {
     0% {
        transform: translateX(0px);
      }
     50% {
        transform: translateX(150px);
      }
       100% {
        transform: translateX(300px);
      }
    }
复制代码

我们可以更有创意，同时为许多属性设置动画，如下例所示：

如何为更多属性设置动画并将它们包含在过渡中

这次我们将为背景设置动画，我们将使元素以方形图案移动。我们将使用该infinite属性作为计时函数使动画永远运行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <style>
    .elem {
      background: orange;
      width: 250px;
      height: 250px;
      border-radius: 10px;
      animation: moveToLeft 5s linear infinite;
      animation-delay: 1000ms;
    }

    @keyframes moveToLeft {
      0% {
        transform: translateX(0px);
        background: linear-gradient(
          to right,
          #ff8177 0%,
          #ff867a 0%,
          #ff8c7f 21%,
          #f99185 52%,
          #cf556c 78%,
          #b12a5b 100%
        );
      }
      25% {
        transform: translateX(400px);
        background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
      }
      50% {
        transform: translateY(200px) translateX(400px);
        background: linear-gradient(to top, #30cfd0 0%, #330867 100%);
      }

      75% {
        transform: translateX(0px) translateY(200px);
        background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
      }
      100% {
        transform: translateY(0px);
      }
    }
  </style>
  <body>
    <div class="elem"></div>
  </body>
</html>
复制代码

让我们分解一下。首先我们添加infinite使动画永远运行。

animation: moveToLeft 5s linear infinite;
复制代码

然后我们将动画分成四个步骤。在每一步，我们将运行不同的过渡，所有动画将按顺序运行。

第一步：将元素水平设置为translateX(0px)，并将背景更改为渐变。

 0% {
        transform: translateX(0px);
        background: linear-gradient(
          to right,
          #ff8177 0%,
          #ff867a 0%,
          #ff8c7f 21%,
          #f99185 52%,
          #cf556c 78%,
          #b12a5b 100%
        );
      }
复制代码

第二个动画将元素从左向右移动并改变背景颜色。

 25% {
        transform: translateX(400px);
        background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
      }
复制代码

第三个动画将使用向下移动元素translateY并再次更改背景颜色。
第四步，元素将向左移动并改变背景颜色。
在第五个动画中，元素应该回到原来的位置。

结论

在本文中，我们介绍了你可以使用 CSS 过渡执行的各种操作。你可以在应用程序中以多种方式使用 CSS 过渡来创建更好的用户体验。