CSS动画

本文是为帮助您入门和熟悉CSS动画而编写的,使用它们来为您带来基于Web的接口以及为艺术带来生命。虽然W3C的CSS动画规范仍在修订中,但是如今它已经有大量的内容可以供我们使用了。

对我而言,CSS动画最令人激动的事情之一是,我们可以非常轻松地使用我们已经熟悉的工具来把它们添加进我们的项目中。如果您已经精通HTML和CSS,您就不需要学习新的语言或插件来为您的项目添加动态效果了。HTML和CSS已经足够,这是一个非常大的加分!无论你只是添加一点点引人注目的设计细节,还是添加非常多的动画,都没有问题。

CSS的transitions属性、JavaScript和SVG都可以为网页添加动态效果,而且都值得我们去做试验,但是JavaScript和SVG的内容不会在这本书中进行讲解。我们重点讲CSS动画规范。

我整理本文的目的是,让您知道CSS动画的可能性,并为您进行试验以及创建动画提供一个坚实的基础。本文会给你足够的CSS动画入门的内容,足以让你变得更有创造力!

浏览器前缀一览

如果没有对浏览器前缀有足够的了解,您就没办法把CSS动画学好,所以我们花一点时间来看看我在本文是如何处理这个问题的。

在我写这篇文章时,Firefox、Opera和IE都可以无前缀支持CSS动画了~耶!但是其它的浏览器,包括这些浏览器稍旧的版本,仍需要添加浏览器前缀来对CSS动画提供支持。因此,我强烈建议在你的所有项目中,只要是动画属性都添加前缀。虽然,我们只能说这是需要的。

当然,你在进行试验或者只是在本地进行测试,只添加你使用的浏览器的前缀即可。到生产版本的时候再添加其它前缀即可。

为了方便阅读,我会在本文的代码片段中使用无前缀版本来写CSS动画属性。有些代码段中会包含前缀,还有一些示例也可以在CodePen上找到,你可以编辑并测试运行它们。

好了,我们现在就开始学习动画吧!

CSS动画基础

CSS动画看起来非常复杂,但是其核心动画的基本内容是非常简单的。动画名、关键帧,还有一些是确定移动的方向的内容。

我们从创建CSS动画的基本要素开始。任何CSS动画中都有两个主要的部分:

  • 定义动画
  • 将其赋给指定的HTML元素(或元素)。

你可以按照不同的顺序来写,但是我建议先定义动画,然后再应用它——这样更符合我的处理过程。

@keyframes 规则

要定义CSS动画,我们需要先使用@keyframes 规则来声明关键帧。你还需要给动画命名,便于后面引用。

例如,如果你创建了一个在屏幕上移动的小车的动画,你可能需要把动画命名为像drive这样的,然后你的 @keyframes 规则应该是这样写的:

@keyframes drive {

}

什么是关键帧?

简单来说,你的关键帧就是一个描述在整个动画过程中,会发生变化的属性列表(也就是,哪些属性会改变,如何改变以及什么时候改变)。

列表上的每一次运行,都会被认为是动画的一次迭代。任何你想要看到的动画属性的改变都需要被列在你的关键帧中。对于Animatable属性的列表,Mozilla Developer Network有我迄今为止看到的最全面的内容

在传统动画中,关键帧是动画中的关键点。通常,这些关键内容会先由资深漫画家绘制出来,然后初级的漫画家在每一帧之间绘制过渡的动画,让所有的关键帧都能平稳回放。CSS关键帧的工作方式也是类似的:我们使用关键帧在动画中指定在各个点的动画属性值,浏览器会自动填充各个部分的过渡。如果你有使用过After Effects 或 Flash 这样的软件,你应该已经对于关键帧的概念非常熟悉了。

定义关键帧

动画是由关键帧组成的!在@keyframes声明中,我们有两种方法来对它进行定义:关键字fromto;或百分比。

非常简单的动画可能只是把一个对象从一个地方移动到另一个地方。在这种情况下,关键字fromto非常适合来定义关键帧。

正如它们的名字,通过写关键帧来定义动画从哪里开始,然后到哪里结束。如果我们把它应用在我们上边提到的简单的小车动画,我们可以把我们的小车从它当前的位置(坐标为0)移动到一个往右400px的位置,来让它在屏幕上移动。

@keyframes drive {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(400px);
    }
}

在很多情况下,你会想要在不止两个状态之间定义动画,这样的话使用百分比会比较合适。

用百分比定义关键帧,从0%关键帧开始,以100%作为结束。0%100%之间的任何数字都可以定义关键帧,所以使用百分比有非常大的灵活性。当然,如果你喜欢的话,你也可以将百分比和fromto混合使用。

如果我们在小车动画中使用百分比来定义关键帧,它是这样写的:

@keyframes drive {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(400px);
    }
}

正如你看到的,from相当于0%,而to则相当于100%

如果你的关键帧列表中不包括0%或者100%,元素上现有的动画样式将会直接被用在0%100%的的位置。此外,你不必按照严格的升序排列来列出百分比。一个0%的关键帧仍然会被认为是动画的第一个关键帧,即使它不是按照顺序排列的。这有很大的灵活性可以给关键帧分组,以便以后再查看。

将动画赋给HTML元素

一旦创建了关键帧声明块,就需要准备把动画赋给一个HTML元素或其它元素。我们还需要为HTML元素定义一个简短的属性列表,比如img元素,为它应用我们刚才创建的动画。

第一个属性是animation-name,用于告诉我们的图像,我们为它应用了哪组关键帧:

animation-name: drive;

第二个属性是animation-duration。我们的关键帧定义了整个动画的内容,但是我们并没有声明我们想要让它持续多长。可以把它设置为2s

animation-duration: 2s;

animation-duration的默认值是0,这也就是为什么在我们看到动画出现之前,我们想要将它设置成其它值。它可以取秒(s)或微秒(ms)为单位。

只有设置了这两个属性以及我们刚才定义的关键帧,我们才可以看到动画。

我们完整的CSS是这样写的:

.car {
    animation-name: drive;
    animation-duration:1s;
}

@keyframes drive {
    from {
        transform: translate(0);
    }
    to {
        transform: translate(400px);
    }
}

完成了!我们刚才只是完成了创建一个CSS动画需要的最基础的东西:一组定义好的关键帧;一个动画名称用于绑定HTML元素;以及动画的长度声明。

还有一件事……

有两个附加属性是我在所有的动画中都会显式定义的。一次性地完成动画而不再去修改(或是很长一段时间都不再去修改)的情况是非常罕见的。所以,我发现为我自己创建的每个动画都定义animation-timing-functionanimation-iteration-count属性,这非常方便。

animation-timing-function属性

animation-timing-function属性的默认值是ease。但是,我建议你再显式设置一次这个值,因为它对于动画有非常大的影响(我们会在后面详细说一下它)。对于我们简单的小车示例,我把"timing function"值设置为ease-in

animation-time-function: ease-in;

animation-iteration-count属性

animation-iteration-count属性也是很方便的一个属性,即使你使用的是默认值。这个属性决定了动画会重复播放多少次,它的默认值是1

animation-iteration-count: 1;

作了这些补充之后,我们的最终CSS是这样的:

.car {
    animation-name: drive;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
}

@keyframes drive {
    from {
        transform: translate(0);
    }
    to {
        transform: translate(400px);
    }
}

查看最终效果。作为我们的第一个示例动画,还是不错的。

探究动画属性

我们已经了解了CSS动画最基础的内容。它涵盖了非常多的内容,但是你很快很发现动画有不同的层,当你在完善动画的同时还想节省时间的时候,你就需要有更多帮助你控制动画的东西了。

幸运的是,有很多的属性可以让我们对CSS动画有更深层次的控制,也可以有更多的润色,让动画更丰富。

本节将着眼于animation-delayanimation-fill-modeanimation-direction 这些属性的使用。我们将使用一个稍微复杂一点的动画,滚动的球,作为我们的下一个示例的基础。我已经创建了一个从左到右移动的球的动画,并通过几个关键帧来演示这些属性是如何派上用场的。这是我们的动画效果。

我们最初的CSS样式:

.ball {
    animation-name: ballmove;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

@keyframes ballmove {
    0% {
        transform: translateX(100px) rotate(0);
    }
    20% {
        transform: translateX(-10px) rotate(-0.5turn);
    }
    100% {
        transform: translateX(450px) rotate(2turn);
    }
}

animation-delay属性

在我们最初的示例中,动画是在我们加载页面完成后就立即运行的。那如果我们不想要动画怎么快就开始播放呢?这就是animation-delay上场的时候啦。animation-durationanimation-delay都接受以秒(s)和毫秒

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/CSS3-animation.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部