CSS动画中的大师班

使用CSS的“动画”过去仅限于悬停效果。同:徘徊:焦点伪课程我们已经能够改变颜色尺寸背景颜色位置,以及许多其他基于用户操作的CSS属性。该:徘徊技巧仅提供两种状态 - 悬停和非悬停 - 只有两个关键帧:开始和结束,这些状态之间没有补间,从而产生严峻和突然的过渡。这不是真正的动画。

CSS3过渡解决了补间问题,可以在一段时间内从非悬停式转换为悬停式(并返回)。现代浏览器(从IE10和Firefox 4.0开始)很好地支持供应商前缀转换。通过转换,我们可以创建有限的简单动画,其中包含两个关键帧 - 起点和终点 - 以及单个迭代。大多数开发人员都通过使用JavaScript来制作动画来克服这些限制。随着CSS3动画的越来越多的支持,现在是时候减少对JavaScript的依赖并使用CSS进行原生动画制作。

在本文中,您将了解开始使用CSS3动画时需要了解的内容。请注意,目前支持动画,前缀为-webkit--moz-,Chrome,Safari 4 +,Firefox 5 +,Android Chrome和iOS webkit。

关键帧

要为元素设置动画,首先需要定义关键帧动画。然后将该动画应用于要设置动画的元素。第一步是定义动画,您可以将动画附加到无限多个元素。动画类似于转换,除了它们提供更精细的控制。定义动画所需的最小值是动画名称,起点或关键帧以及终点或关键帧。

@keyframes flapping {from {background-size:100px 100px; } {background-size:20px 100px; }}

在上面的代码中,我们声明了动画名称,起始关键帧和结束关键帧。如果您使用的是合适的浏览器,则可以单击蝴蝶以查看动画中的动画:

在上面的动画中,我们已经使用了Keyterms。我们也可以使用百分比,这通常是您想要使用的百分比。

@keyframes flapping {0%{background-size:100px 100px; 100%{background-size:20px 100px; }}

声明动画时要记住的一些事项:

  • 不要忘记%当涉及长度时,如px和ems,0为0.注意动画声明。不要忘记%测量单位。
  • 不要忘记关键帧声明的100%或最终虽然规范不要求0%和100%,但它们需要包含在当前的浏览器实现中。
  • 不要引用动画名称尽管引用动画提供了更清晰的标记,但根据W3C草案规范添加名称的引号不正确,并且会使Firefox中的动画失败。

使关键帧动画比转换更强大的功能之一是能够在粒度级别上控制动画。例如,下面的彩虹动画有11个关键帧块:

Click on the ball to see the rainbow animation in action

点击球看彩虹动画
@keyframes rainbow {0%{background-color:#FF0000;} 10%{background-color:#FF8000;} 20%{background-color:#FFFF00;} 30%{background-color:#80FF00;} 40% {background-color:#00FF00;} 50%{background-color:#00FF80;} 60%{background-color:#00FFFF;} 70%{background-color:#0080FF;} 80%{background-color:# 0000FF;} 90%{background-color:#8000FF;} 100%{background-color:#FF0080;}}

如果我们使用CSS转换从#FF0000转到#FF0080,我们将从红色转换为洋红色,仅显示红色光谱中的颜色。通过动画关键帧粒度控制,我们的动画通过颜色光谱从红色变为粉红色。

我们可以在任何关键帧块中包含尽可能多的动画属性。看到这里的例子

@keyframes rainbowdimmer {0%{background-color:#FF0000;不透明度:1;} 20%{background-color:#FFFF00;} 40%{background-color:#00FF00;} 50%{opacity:0;} 60%{background-color:#00FFFF;} 80%{background -color:#0000FF;} 100%{background-color:#FF0080;不透明度:1;}}

在此示例中,不透明度将从不透明变为透明和后透明,而颜色将通过光谱。请注意,我们不需要在每个关键帧块中声明每个属性。相反,当该属性需要关键帧定义时,我们只包含属性。

请注意,不支持重复的关键帧选择器:

  1. 100%{background-color:#FF0080;}
  2. 100%{不透明度:1;}

当两个关键帧块具有相同的选择器时,根据级联,最后一个块将覆盖先前声明的块。如果我们写了上面的内容,第9行将被忽略,由第10行覆盖,第10行具有相同的关键帧选择器值。

另一方面,如果您的动画具有重复的关键帧,则不必两次声明相同的块。而是使用逗号分隔重复关键帧的选择器。请注意,声明的顺序无关紧要(100%可以在0%之前)。在蝴蝶的例子中,我们想要在蝴蝶完全相同的位置开始和结束我们的蝴蝶运动动画。我们只是用逗号分隔第一个和最后一个关键帧选择器,而不是声明两个单独的代码块:

@keyframes移动{0%,100%{top:0;左:0; 25%{top:0;左:100px; 50%{top:100px;左:100px; } 75%{top:100px;左:0; }}

创建时一个弹跳球动画,每次反弹,球都在容器的底部:

Click on the image to see the animation

单击图像以查看动画

我们将四个“底部”关键帧中的三个一起声明,因为最终的关键帧包含多个属性。当关键帧块中的所有属性/值相同时,您只能使用逗号分隔的重复关键帧。

@ -webkit-keyframes弹跳{40%,70%,90%{animation-timing-function:ease-out;底部:0; } 0%{bottom:200px;左:0;动画定时功能:轻松实现; 55%{底部:50px;动画定时功能:轻松实现; 80%{底部:25px;动画定时功能:轻松实现; 95%{底部:10px;动画定时功能:轻松实现; } 100%{left:110px;底部:0;动画定时功能:缓解; }}

请注意,我们有两个动画属性。我们通过粒度控制多次上下移动球。然而,从左到右的运动是平滑的,因此只需要两个关键帧声明。我们还改变了动画计时功能,使弹跳看起来平滑自然。我们将在下面讨论这个动画的动画计时功能部分,但重要的是要注意动画计时功能是唯一可以包含在关键帧声明中的动画属性。 W3C不完整可动画的属性列表。我们可以包含动画计时功能来定义动画如何移动到下一个关键帧。没有它,我们上面的弹跳球动画非常跳跃。

供应商前缀

我们上面的动画实际上无法在任何地方使用。在撰写本文时,唯一支持动画的浏览器需要供应商前缀。我们必须三次声明@keyframes:使用-moz-用于Firefox 5+,使用-webkit-前缀用于Safari,Chrome和各种移动webkit浏览器,最后一个,没有任何前缀,用于浏览器支持供应商中立时句法。

/ *用于Webkit浏览器* / @  -  webkit-keyframes flitter {0%{-webkit-transform:scale(1,1); } 100%{-webkit-transform:scale(0.2,1); Firefox * / @的/ /  -  moz-keyframes flitter {0%{-moz-transform:scale(1,1); } 100%{-moz-transform:scale(0.2,1); / *面向未来:适用于支持vendorles语法的浏览器* / @keyframes flitter {0%{transform:scale(1,1); } 100%{变换:比例(0.2,1); }}

在此示例中,我们在“关键帧”关键字前面添加了供应商前缀,并且还为转换属性添加了供应商前缀,因为尚不支持无供应商转换。

动画元素

现在我们已经声明了动画,我们可以通过将动画附加到它们来为页面上的元素设置动画。我们至少需要为元素提供动画名称和持续时间。还有许多其他属性可以让我们控制动画的外观,但名称和持续时间是必需的。

让我们开始定义我们的蝴蝶:

.butterfly {身高:100px;宽度:100px;位置:绝对;上:50px;左:50px; background-image:url(butterfly.png); }

动画名称和动画持续时间

我们的第一个目标是制造蝴蝶絮。要应用动画,我们为元素提供要使用的动画的名称和该动画的持续时间。为此,我们有两个属性:动画名动画持续时间。 Animation-name属性接受以逗号分隔的不带引号的动画名称列表。这些是您在@keyframes规则中定义的用户定义名称。到目前为止,在上面的例子中,我们可以包括拍打,闪光,彩虹,彩虹调光和弹跳。

除了添加动画名称之外,我们还必须定义动画应以秒(s)或毫秒(ms)为单位的持续时间。使用animation-duration属性添加动画从0%到100%迭代一次所需的时间长度。最短持续时间为1毫秒。在我们的拍打例子,我们在上面的例子中使用了500毫秒,或0.5秒。

.butterfly {-webkit-animation-name:flitter; -webkit-animation-duration:500ms; -moz-animation-name:flitter; -moz-animation-duration:500ms;动画名称:flitter;动画持续时间:500ms; }

“动画迭代计数”

我们的蝴蝶没有飞舞(或飘飘?)。默认情况下,动画只迭代一次。至使它掠过几次,或永远,我们可以添加'动画迭代计数'财产。其值可以是整数,也可以是关键术语“无限”。默认值为“1”。

.butterfly {-webkit-animation-name:flitter; -webkit-animation-duration:500ms; -webkit-animation-iteration-count:无数; -moz-animation-name:flitter; -moz-animation-duration:500ms; -moz-animation-iteration-count:无数;动画名称:flitter;动画持续时间:500ms; animation-iteration-count:无限; }

动画方向

上面的动画令人烦恼的不仅仅是因为它不会停止,而是因为动画从0%关键帧变为100%超过500毫秒,但随后又跳回到0%。它随时间从100px宽扩展到20px宽,然后在开始下一次迭代时跳回到100px。默认过程是动画随时间从0%迭代到100%,然后跳回到0%以开始下一次迭代。

有时您希望动画的行为类似于过渡:当您在悬停时转换时,动画会在鼠标移出时反转。随着动画方向属性,每个其他动画可以设置为从100%到0%。虽然弹跳球只在一个方向上移动,总是从0%到100%,但是蝴蝶的掠过是需要交替动画方向的一个很好的例子。让我们把它添加到我们的蝴蝶:

.butterfly {-webkit-animation-name:flitter; -webkit-animation-duration:500ms; -webkit-animation-iteration-count:40; -webkit-animation-direction:alternate; -moz-animation-name:flitter; -moz-animation-duration:500ms; -moz-animation-iteration-count:40; -moz-animation-direction:alternate;动画名称:flitter;动画持续时间:500ms; animation-iteration-count:40;动画方向:交替; }

“动画定时函数”

我们可以进一步微调我们的动画通过设置动画计时功能来控制如何随时间计算这些中间值。默认值是“缓和”,但大多数动物运动随着时间的推移真的很容易进出。我们为动画计时功能添加了easy-in-out值。

.butterfly {-webkit-animation-name:flitter; -webkit-animation-duration:500ms; -webkit-animation-iteration-count:40; -webkit-animation-direction:alternate; -webkit-animation-timing-function:easy-in-out; -moz-animation-name:flitter; -moz-animation-duration:500ms; -moz-animation-iteration-count:40; -moz-animation-direction:alternate; -moz-animation-timing-function:easy-in-out;动画名称:flitter;动画持续时间:500ms; animation-iteration-count:40;动画方向:交替;动画计时功能:轻松进入}

我们还在弹跳动画的不同步骤中添加了缓入和缓出功能。 Animation-timing-function是唯一可以包含在关键帧声明中的动画属性。包括动画计时功能,以定义动画如何移动到下一个关键帧。没有它,我们上面的弹跳球动画会非常跳跃。

“动画延迟”

默认情况下,动画在应用时立即开始。我们可以使用动画延迟属性来控制它。虽然这是一个易于理解的属性,但有一个很酷的技巧来了解动画延迟。如果您希望动画在动画中途开始,请包含否定的动画延迟值。例如,如果你有一个10秒的动画,包括动画延迟:-5s;将导致动画立即开始,从动画的一半开始。

'动画'(速记)

动画属性很详细。太冗长了。特别是供应商前缀。幸运的是,有一个简写。速记必须包括动画的名称和持续时间。如果您要延迟,请确保持续时间先到!订单一般是:

动画:  ;

我们可以写上面的动画有三条简单的线条

.butterfly {-webkit-animation:flitter 500ms ease-in-out 5s 40 alternate; -moz-animation:flts 500ms easy-in-out 5s 40 alternate;动画:flms 500ms easy-in-out 5s 40 alternate; }

单个元素可以同时具有多个动画。我们有一只漂浮的蝴蝶,但它不会去任何地方。让它在盒子周围移动,好像它实际上在飞行一样

.butterfly {-webkit-animation:flitter 300ms ease-in-out 1s 40 alternate,move 5s linear 2s; -moz-animation:flitter 300ms easy-in-out 1s 40 alternate,move 5s linear 2s;动画:飞行器300毫秒轻松进出1s 40替代,运动5s线性2s; }

始终考虑动画的持续时间和交互计数,以便很好地为动画计时。还要考虑要动画的属性。虽然我们可以对元素应用尽可能多的动画,但我们一次只能应用一次属性。换句话说,虽然我们可能有四个要附加到元素的动画,但我们一次只能应用一个变换和一个顶部/左侧位置值。

.butterfly {-webkit-transform-origin:-20px -20px; -moz-transform-origin:-20px -20px; -webkit-animation:flitter 300ms轻松进出1s 40替补,弹跳10s轻松进出1s,旋转0.5s轻松24 1s; -moz-animation:flitter 300ms轻松进出1s 40替补,弹跳10s轻松进出1s,旋转0.5s轻松24 1s;动画:飞行器300ms轻松进出1s 40替补,弹跳10s轻松进出1s,旋转0.5s轻松24 1s; }

我们添加了transform-origin使旋转看起来更随机和自然。另请注意,我们有三个动画分别以13,11和13秒结束。包含多个动画时,请考虑它们相对于彼此的时间。

动画填充模式

我们的蝴蝶很好地漂浮在页面上,但是当弹跳动画完成时,它会向上拉回到左上角。随着动画填充模式物业,我们可以动画结束时告诉蝴蝶留在右下角

动画填充模式采用以下四个值之一:向后,向前,无或两者,默认为无。向后的值使元素在页面加载时直接进入关键帧0%,即使存在动画延迟,也会停留在动画开始之前。

前锋的值告诉浏览器在最后一次迭代结束时停止最后一个关键帧上的动画,而不是恢复到其动画前状态。

两者的值都适用于向后和向前,坐在第一个关键帧上,直到动画开始(无论正动画延迟的长度)并保持在最后一个动画结束时的最后一个关键帧。这就是我们想要的反弹:

.butterfly {-webkit-transform-origin:-20px -20px; -moz-transform-origin:-20px -20px; -webkit-animation:flitter 300ms轻松进出1s 40替补,弹跳10s轻松进出1s,旋转0.5s轻松24 1s前锋; -moz-animation:flitter 300ms轻松进出1s 40替补,弹跳10s轻松进出1s,旋转0.5s轻松24 1s前锋;动画:飞行器300毫秒轻松进入1s 40替补,弹跳10s轻松进出1s,旋转0.5s轻松24 1s前锋; }

暂停和播放动画

除了使用动画填充模式暂停第一个和最后一个关键帧之外,我们可以暂停一下动画播放状态。默认情况下,所有动画都在“正在运行”,但可以暂停:

.butterfly:hover {-webkit-animation-play-state:paused; -moz-动画播放状态:暂停;动画播放状态:暂停; }

要查看此悬停声明的实际操作,只需将鼠标悬停在上面的任何动画蝴蝶上即可。

我们走过了一个非常简单的动画。这只是为了表明可能的。 CSS动画非常强大,提供了一种不使用JavaScript的动画方式,同时在需要JavaScript事件时提供事件处理程序。

重要的是要记住,仅仅因为动画是可能的,并不意味着它总是一个好主意。明智地使用动画。我们不想回到20世纪90年代后期的动画GIF状态,或者是21世纪初期Flash的大量介绍。

记住:只因为你可以,并不意味着你应该!



翻译字数超限