商务路路通
html设定元素动画执⾏,CSS动画_Animation教程_W3cplus 本⽂是为帮助您⼊门和熟悉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声明中，我们有两种⽅法来对它进⾏定义：关键字from 和 to；或百分⽐。
⾮常简单的动画可能只是把⼀个对象从⼀个地⽅移动到另⼀个地⽅。在这种情况下，关键字from 和 to⾮常适合来定义关键帧。
正如它们的名字，通过写关键帧来定义动画从哪⾥开始，然后到哪⾥结束。如果我们把它应⽤在我们上边提到的简单的⼩车动画，我们可以把我们的⼩车从它当前的位置(坐标为0)移动到⼀个往右400px的位置，来让它在屏幕上移动。 @keyframes drive {
from {
transform: translateX(0);
}
to {
w3c
transform: translateX(400px);
}
}
在很多情况下，你会想要在不⽌两个状态之间定义动画，这样的话使⽤百分⽐会⽐较合适。
⽤百分⽐定义关键帧，从0%关键帧开始，以100%作为结束。0%到100%之间的任何数字都可以定义关键帧，所以使⽤百分⽐有⾮常⼤的灵活性。当然，如果你喜欢的话，你也可以将百分⽐和from、to混合使⽤。
如果我们在⼩车动画中使⽤百分⽐来定义关键帧，它是这样写的：
@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;br710
animation-duration:1s;
}
@keyframes drive {
from {
transform: translate(0);
}
to {
transform: translate(400px);
}
}
完成了！我们刚才只是完成了创建⼀个CSS动画需要的最基础的东西：⼀组定义好的关键帧；⼀个动画名称⽤于绑定HTML元素；以及动画的长度声明。
还有⼀件事……
有两个附加属性是我在所有的动画中都会显式定义的。⼀次性地完成动画⽽不再去修改(或是很长⼀段时间都不再去修改)的情况是⾮常罕见的。所以，我发现为我⾃⼰创建的每个动画都定义animation-timing-function和animation-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-delay 、 animation-fill-mode 和 animation-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-duration和animation-delay都接受以秒(s)和毫秒(ms)为单位的值，现在为动画设置2s的animation-delay。
animation-delay: 2s;
带有延迟的动画:
现在我们已经在球动画开始之前有了⼀个看起来不错的暂停。你可能注意到了，在动画结束的时候，我们的球会回到原来的位置。这不是结束⼀个动画最理想的⽅式。当你的对象在屏幕上移动，你可能希望它能停在结束的位置，⽽不是回到原来的位置。这就是animation-fill-mode可以完成的东西。
animation-fill-mode属性
animation-fill-mode属性可以接受四个值：none、backwards、forwards和both。如果你没有声明这个属性的话，默认值为none。在这个⽰例中，我们让关键帧⼀路把球移动到容器的右侧。但是在动画结束的时候，⼩球⼜回到了它的初始位置。这是因为animation-fill-mode:none的作⽤。当动画结束的时候，它会返回⾃⼰的初始位置。
我在CodePen上创建了⼀个⽰例，你可以为其添加或者改变animation-fill-mode属性的值，来看看结果是否有变化。
animation-fill-mode: forwards
但是，如果我们显式地设置animation-fill-mode为forwards，在动画结束之后，我们的⼩球会保持它最后⼀帧的样式；在这个⽰例
中，100%的关键帧会把它放到右侧。我们给.ball这个类添加⼀个属性：
animation-fill-mode: forwards;
现在，我们的⼩球就会保持在我们动画结束的位置，这可能⽐较符合常理。效果如下。你可以想象成animation-fill-mode: forwards就是在动画播放过程中⽤于扩展最后⼀个关键帧的样式的。
animation-fill-mode: backwards
当使⽤延迟动画时，将动画的fill-mode设置为backwards⾮常⽅便。在我们的⽰例中，动画有⼀个2s的延迟，然后它先向左再向右移动。如果没有设置animation-fill-mode属性，在动画经过延迟之后，开始播放，⼩球会突然跳到0%关键帧定义的位置。这虽然不会像动画结束的时候它就突然回到起点这样，但是看起来还是不太好的。
如果我们加上⼀个animation-fill-mode属性并设置为backwards，⼩球就会在我们的animation-delay时变成我们0%关键帧定义的样式。你可以想象成它就是把0%关键帧位置的样式扩展到延迟的位置。
animation-fill-mode: backwards;
预览我们的⽰例来看看结果:
补充⼀下，如果没有0%(或from)关键帧，你的动画也可以在 animation-delay的过程中先到达相应的位置。浏览器会使⽤已经应⽤到你的⽬标元素上的样式，作为你的动画的开始关键帧的样式，以替换缺省的初始关键帧，因此会在延迟过程中将你的⽬标元素先放到对应的位置。不过这并不总是可⾏的，取决于你项⽬的设置，有可能是其它的情况，不过有得选择总是好的。
animation-fill-mode: both
还有⼀个可选的值是both，正如它的字⾯意思，它是forwards和backwards的结合。动画可以在开始前就已经是第⼀个关键帧的样式，然后，在动画完成后，保持最后⼀个关键帧的样式。
回到我们的⽰例中。这种情况下，我们会使⽤both，这样我们的⼩球就会在它开始前就带有我们第⼀个关键帧定义的样式，在它结束之后会保持最后⼀个关键帧的样式。
animation-fill-mode: both;
我们最终的CSS是这样写的：
.ball {
animation-name: ballmove;
animation-duration: 2s;
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议