CSS中的文本动画

大家好，今天我将向你们展示一些文本上的 CSS 动画。我展示的所有动画都有类似的代码，在理解了这些动画之后，你就可以轻松地用它创建自己的动画。

让我们开始吧...

在深入探讨这个话题之前，首先要了解这一点。

CSS 中的 var 是什么？

var() 函数用于插入 CSS 变量的值。
例如，如果你为某个元素提供一个类似“--i:1”的值，则表示该元素有一个名为“i”的变量，其值为“1”。
我们可以使用 var() 函数访问这个变量。

我将解释一个动画，因为其他动画类似，您将很容易理解它们。

动画 - 1

在这个动画中，我们将创建一个气泡类型的文本动画。

HTML

<ul class="container">
  <li style="--i:1">A</li>
  <li style="--i:1.3">N</li>
  <li style="--i:1.6">I</li>
  <li style="--i:1.9">M</li>
  <li style="--i:2.2">A</li>
  <li style="--i:2.5">T</li>
  <li style="--i:2.8">I</li>
  <li style="--i:3.1">O</li>
  <li style="--i:3.4">N</li>
</ul>

我们创建了一个 ul 元素，并在其中为每个字母创建了 li 元素，并为每个 li 元素提供了一个名为“i”且具有不同值的变量。

CSS

.container {
  display: flex;
  justify-content: center;
  font-size: 3rem;
  list-style-type: none;
  display: flex;
  gap: 20px;
}

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
li {
  animation-name: bubbly;
  animation-duration: calc(var(--i) * 1s);
   animation-fill-mode:forwards;
  animation-timing-function:ease-in-out
}

/* keyframes */
@keyframes bubbly {
  0% {
    opacity: 0;
    /* transform: translateY(-100px); */
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    /* transform: translateY(0); */
    transform: scale(1);
  }
}

首先，我们用一些属性来设置容器元素的样式。
然后我们为 li 元素提供了动画名称，该动画将应用于所有 li 元素
最好的部分来了，我们使用了 calc() 函数，calc() 函数执行计算以用作属性值。
在 calc() 中，我们使用了变量“i”通过 var() 函数。它将使用变量“i”的值并使用该值设置动画持续时间，因此所有 li 元素的动画持续时间都会不同。
然后在关键帧内，我们定义了动画。