CSS动画教程——1

欢迎来到全新的 CSS 动画系列。在我之前的系列“十天学会 CSS3”中，我做了一些动画，并深深地迷上了它们。所以，我决定创建一个 CSS 动画教程。

该系列的灵感来自于The Net Ninja的这个精彩的 YouTube 系列。

我们将首先学习一些有关 CSS 动画的知识，然后创建一些很酷的动画。

那么，继续创建一个 index.html 文件并输入以下代码。它只是显示一个云图像。

CSS动画

然后我们将有一个 style.css 文件，其中包含基本样式。

基本样式

它将在我们的网页上显示这朵漂亮的居中云，背景为浅蓝色背景。

云图

我们首先来学习transform。通过 transform 属性，我们可以对元素进行二维变换。

它还有很多其他属性。我们首先来学习一下平移属性。translateX 属性用于在 x 轴上移动元素。

在我们的 style.css 中添加以下内容。

翻译X

它会将我们的云在 x 轴上（即向右）移动 120px。

沿 x 轴移动

类似地，负单位将在 x 轴上向左移动。

负向翻译X

将会显示如下。

沿 x 轴移动

现在，您可能已经猜到了——translateY 在 y 轴上移动元素。

下面是正向的translateY。

正向平移

它会将元素向下移动。

沿 y 轴移动

类似地，负的translateY。

负向平移Y

将元素向上移动，这也会导致图像被剪切。

沿 y 轴移动

我们可以通过在翻译中传递两个值来移动元素，x 轴和 y 轴。

翻译

将导致以下结果。

沿 x 轴和 y 轴移动

接下来，我们来研究一下比例。它本质上就是拉伸或收缩一个元素。

首先，我们将研究沿 x 轴拉伸或收缩元素的 scaleX。

缩放X

它将沿 x 轴拉伸 1.5 倍。

x轴

现在，scaleY 沿 y 轴拉伸或收缩元素。

比例尺Y

它将沿 y 轴将元素缩小 0.5 倍。

y轴

我们还可以使用比例在两个轴上进行缩放。

规模

它将在两个轴上缩放。

在两个轴上

接下来，我们来研究一下 rotate 的 transform 属性。它用于将二维元素沿 x、y 或 z 轴旋转。

我们首先看到 rotateX，它沿 x 轴旋转元素。

旋转X

图像变小了，有点难以想象。但实际上它沿着 x 轴旋转，所以在人眼看来它变小了。

沿 x 轴

类似地，rotateY 将沿 y 轴旋转元素。

旋转Y

将会在下方展示。

沿 y 轴

现在，rotateZ 将沿 z 轴旋转元素。

旋转Z

由于它沿 z 轴旋转，因此更容易想象。

沿z轴

我们还可以将我们学习到的所有三个变换属性链接起来，如下所示。

全部在一起

它会将一个属性的结果应用于另一个属性。首先旋转，然后平移，最后缩放。

一起蜕变

接下来我们来学习transition属性。在 index.html 中添加一个圆圈

新元素

另外，在 style.css 中为这个圆圈添加一些样式

新风格

它将在浏览器中显示如下。

新元素

现在，让我们在圆圈上添加一个悬停状态。

悬停状态

如下图所示，只有背景发生了变化，而变换效果没有显示出来。这是因为状态变化是瞬间发生的。

仅背景

现在，如果我们在父元素中放置 1 秒的转换，它将在 1 秒内顺利应用所有悬停状态转换。

过渡

现在，它将改变背景颜色并旋转 360 度。

两种悬停状态均已应用

我们还可以让背景、变换和过渡效果占用不同的时间。我们需要添加如下代码。

以不同的方式过渡

现在，背景在 1 秒内发生变化，但旋转速度更快。

快速旋转

过渡中还有另外两个属性，分别是 transition-timing-function 和 transition-delay。

现在，transition-timing-function 指定了转换发生的速度。

并且转换延迟指定转换开始后的延迟时间。

现在，在下面的示例转换中：1s ease-in 0.8s；表示应用转换 1 秒，使用 ease-in 函数并延迟 0.8 秒。

所有房产

它将显示如下转换。

彻底的转​​变

现在，还有一些其他的转换定时功能，如下所示-

• ease — 指定以缓慢开始，然后快速，然后缓慢结束的效果（这是默认值）

• linear — 指定从开始到结束具有相同速度的效果

• ease-in — 指定缓慢启动的效果

• ease-out — 指定缓慢结束的效果

• ease-in-out — 指定以缓慢的开始和结束的效果

您可以全部尝试，但最常用的是线性和缓入。

本系列的第一部分到此结束。您可以在这里找到相关代码。