无需JavaScript即可创建强大的CSS动画效果

热门技术勘探工
114 阅读4分钟

Create Powerful Animations Using Only CSS

在这篇文章中，我们将探索网络上的动画世界，只使用CSS。我们将首先使用SVG和CSS的组合创建一个简单的动画。然后，我们将只使用HTML和CSS来创建另外几个动画。我们还将讨论何时需要调用JavaScript以及CSS的限制。

在本文结束时，你将能够使用CSS来创建动画，而不是使用JavaScript。你也将能够确定何时需要使用JavaScript来创建动画。

为了从本文中获得最大的收获，我们假定你至少有CSS和HTML的核心知识。如果你刚开始接触网络开发，有一些很好的学习和获得帮助的资源，如SitePoint上的学习资源，非常有用的SitePoint论坛，还有freecodecamp。

绘图效果动画

这是一个令人印象深刻的动画，创建起来非常容易。下面是我们的目标的屏幕截图。

final animation

我们首先需要为我们的标志创建SVG。

<svg xmlns="http://www.w3.org/2000/svg" width="279.15" height="343.95" overflow="visible" stroke="#000" stroke-width="1">
 <path d="M110.57 248.64c-22.7-21.25-45.06-42.09-67.31-63.06-11.73-11.06-23.32-22.26-34.87-33.51C-2.6 141.35-2.86 128 8.02 117.42 47.67 78.82 87.46 40.35 127.21 1.84c.46-.44 1.03-.77 2.47-1.84 12.52 13.66 25.06 27.34 37.1 40.47-4.44 4.76-10.06 11.31-16.21 17.33-22.69 22.2-45.56 44.22-68.34 66.32-7.89 7.66-7.97 13.48.11 21.07 19.38 18.19 38.85 36.29 58.37 54.33 7.53 6.96 7.75 12.42.32 19.64-10.01 9.72-20.05 19.4-30.46 29.48z"/>
 <path d="M150.02 343.95c-13.41-13.03-26.71-25.97-40.2-39.08 1.23-1.32 2.19-2.44 3.24-3.46 27.8-26.95 55.61-53.89 83.42-80.83 8.32-8.05 8.41-13.92-.01-21.79-19.54-18.27-39.14-36.47-58.77-54.63-6.52-6.04-6.76-12.11-.37-18.33 10.24-9.96 20.52-19.87 31.15-30.16 6.33 5.89 12.53 11.58 18.65 17.37 27.53 26.03 55.07 52.05 82.52 78.16 12.57 11.96 12.66 24.78.33 36.75-38.99 37.85-78.04 75.64-117.07 113.45-.82.79-1.71 1.51-2.89 2.55z"/>
</svg>

这里有一个设置了SVG的笔。你可以随意使用它，这样你就可以按照下面的步骤进行操作了。

0有了我们的SVG，我们现在将fill-opacity 。我们稍后将对其进行动画处理。

svg {
  fill-opacity: 0;
}

(更新笔)

我们现在可以专注于绘制SVG。我们将通过使用CSS的stroke-dashoffset 和stroke-dasharray 属性来实现这一目标。

stroke-dasharray 属性控制用于使笔画成为路径的间隙和破折号的模式。例如，stroke-dasharray: 10 应用于SVG中的路径，可以创建一个笔画和间隙长度为10像素的虚线效果。

请看CodePen上SitePoint（@SitePoint）的Pen
Stroke-dasharray演示
。

现在，对于我们在这里创建的动画，我们希望我们的间隙和破折号的长度与我们的path 。也就是说，我们的标志轮廓的整个长度将被视为 "一个破折号"，可以这样说，一个间隙也将是整个轮廓的长度。我们的想法是，我们将从标志的轮廓开始作为一个缺口，然后将轮廓作为破折号进行动画处理。

但是标志的轮廓有多长呢？处理这个问题的一个简单方法是设置长度。让我们编辑我们的SVG代码，给每个路径添加pathLength="1" 。

 …
 <path pathLength="1" d="M110.57 … >
 …

(更新笔)

这样一来，做绘图动画就容易多了。现在我们已经设置了pathLength ，我们也可以在CSS中把stroke-dasharray 设置为1 。

svg path {
  stroke-dasharray: 1;
}

(更新的笔)

现在，这里似乎没有什么变化，但这也没关系。徽标的每个部分的整个路径现在只是一个大的破折号。(你可以实验一下，把pathLength="1" 从其中一个路径中删除。它将突然变成一条由1px的线和空隙组成的虚线）。

我们现在可以使用stroke-dashoffset ，它指定了我们应该在破折号图案的多远处开始破折号。在我们的例子中，我们想把stroke-dashoffset 设置为1 ，所以我们从gap 而不是dash 开始。由于我们每个间隙的长度是我们path 的整个长度，我们现在会看到一个空白的屏幕。

svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;  
}

我们现在可以将stroke-dashoffset 动画化，回到0 ，这将产生一个绘图效果。

svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;  
  animation: draw 2s forwards;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

酷!有了这个，我们现在就有了这个。

请看笔
SitePoint标志动画。Step 5 by SitePoint (@SitePoint)
onCodePen.

为了完成我们的动画，我们只需要在我们的fill-opacity 。

svg {
  width: 40%;
  fill-opacity: 0;
  // we set a delay of 2s so it won't start until our drawing is finished
  animation: fadeOpacity 2s forwards 2s;
}

@keyframes fadeOpacity {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

现在我们有了最终的动画。

请看笔
SitePoint标志动画。Step 6 (final) by SitePoint (@SitePoint)
onCodePen.

我敢打赌，这比你想象的要简单得多!我知道stroke-dashoffset 和stroke-dasharray 属性可能有点令人困惑，但当你把你的path 设置为长度为1 ，它们就更容易操作了。

这就是一个快速的例子，说明了CSS与SVG结合的力量。现在让我们在下一个例子中进一步推动。

继续阅读：在SitePoint上创建强大的CSS动画效果，不需要JavaScript。

avatar
文章
阅读
粉丝