使用 CSS 进行 Web 动画 - 学习基础知识

介绍

最后说明

介绍

动画使网页比任何不含动画的静态网页更有趣、更具吸引力、互动性更强。我们每天访问的网站数量众多，但很少有网站在纯前端方面脱颖而出。网页动画使我们的网站在众多网站中脱颖而出。

所以，我打算开始一个名为“Web 动画”的系列教程。在这个系列中，我们将从零开始学习使用 CSS 进行 Web 动画。我们将学习从基础到高级的各种概念。

从网络动画中的第一个主题开始，是变换、过渡和关键帧。

转换

Transform 属性可帮助您向元素添加 2D 或 3D 变换。它允许您对元素进行缩放、旋转、移动等操作。阅读此处了解 transform 属性的所有值。

代码

{
 transform : scale(1.5,1.5)
}

CodePen 示例

在上面的例子中，类名为 的元素smallcircle被赋予了 transform 属性。我们应用了 transform 值来改变元素的位置。smallcircle和bigcircle一起呈现为同心圆。

过渡

CSS transition 属性允许你在特定时间内更改元素的属性。我们将要应用过渡效果的属性名称作为值传入。我们可以定义持续时间、过渡延迟，并以空格分隔（以秒为单位）。你可以在这里了解与 transition 相关的不同值。

代码

{
 transition : background-color 1s;
}

CodePen 示例

在上面的代码中，我们可以看到圆圈从左向右过渡，并且圆圈的颜色也发生了变化。我们给类名为 的 div 应用了 transition 属性circle。我们传递了想要应用过渡的属性值，并在旁边添加了过渡的持续时间。我们可以为过渡赋予不同的值，并用逗号 (,) 分隔。为了触发过渡，我们使用了悬停选择器。这必须定义从初始值到过渡发生的属性和值。

关键帧

关键帧允许您通过为不同的动画阶段设置不同的 CSS 样式来控制动画流程。它是从一组 CSS 样式到另一组 CSS 样式的过渡。您可以多次更改元素的不同属性。您可以使用from和to分别定义过渡的开始和结束。您还可以使用百分比来定义过渡不同阶段的多个变化，使用0%百分比100%。0% 表示开始，100% 表示结束。

代码

@keyframe move{
 from{
   background-color:red;
}
 to{
   background-color:green;
}

Codepen 示例

在上面的代码中，我们有三个循环播放动画的圆圈。我们定义了动画属性，例如animation-name，，，和。对于过渡，我们使用定义了一个关键帧。定义之后，我们得到了动画的名称，即和。至于动画，我们使用了百分比。我们必须为过渡定义 CSS 样式。由于没有和，这使得动画的起始值和结束值成为属性的初始值。animation-durationanimation-iteration-countanimation-timing-function@@keyframebouncebounce150%0%100%

最后说明

现在，借助变换、过渡和关键帧，我们可以为网页添加基本动画。

我希望，借助动画的这种新力量，您可以在下一个项目中应用它，使其更具交互性。

感谢您阅读这篇博文。