通过之前的学习我们知道,利用 transition 属性可以实现简单的过渡动画,但过渡动画仅能指定开始和结束两个状态,整个过程都是由特定的函数来控制的,不是很灵活。本节我们再来介绍一种更为复杂的动画 —— animation。
动画(animation):和过渡类似,都是可以实现一些动态的效果,不同的是过渡需要在某个属性发生变化时才可以触发,而动画效果则可以自动触发动态效果。设置动画效果必须先要设置一个关键帧,关键帧设置了动画执行的每一个步骤。关键帧设置的格式如下:
<style>/*定义动画关键帧,关键帧的名字为test*/@keyframestest{/*from表示动画的开始位置,也可以使用0%来表示。*/from{margin-left:0;}/*to表示动画的结束位置,也可以使用100%来表示。*/to{margin-left:100%;}}</style>
CSS 中的动画类似于 flash 中的逐帧动画,表现细腻并且非常灵活,使用 CSS 中的动画可以取代许多网页中的动态图像、Flash 动画或者 JavaScript 实现的特殊效果。
动画就是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数(很官方的回答)。
CSS3animation(动画)属性。
@keyframes
通过 @keyframes 规则,我们可以创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。为了获得最佳的浏览器支持,我们应该始终定义 0% 和 100% 选择器。这里面0%就是一帧,50%是一帧,100%也是一帧。
最后,请使用动画属性来控制动画的外观,同时将动画与选择器绑定
animationname 必需。定义动画的名称。
keyframes-selector必需。动画时长的百分比合法的值:0-100%from(与0%相同)to(与100%相同)
css-styles 必需。一个或多个合法的 CSS 样式属性
举个例子:
@keyframesname{0%{top:0px;left:0px;background:red;}25%{top:0px;left:100px;background:blue;}50%{top:100px;left:100px;background:yellow;}75%{top:100px;left:0px;background:green;}100%{top:0px;left:0px;background:red;}}
1. animation-name属性:设置需要绑定到元素的动画名称。
animation-name 属性用来将动画绑定到指定的 HTML 元素,属性的可选值如下:
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position:relative;animation-name:ball;}</style></head><body><div></div></body></html>
运行结果:
注意:要想让动画成功播放,您还需要定义 animation-duration 属性,否则会因为 animation-duration 属性的默认值为 0,导致动画并不会播放。
2. animation-duration属性:定义动画完成一个周期需要多少秒或毫秒。
● time:指定动画播放完成花费的时间。默认值为 0, 意味着没有动画效果。
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position:relative;animation-name:ball;animation-duration:2s;}</style></head><body><div></div></body></html>
3. animation-timing-function:使用的数学函数,称为三次贝塞尔曲线、速度曲线。使用此函数,你可以使用自己的值,或使用预先定义的值之一。
●linear:动画从头到尾的速度是相同的;
●ease:默认。动画从低开始,然后加快,在结束之前变慢;
●ease-in:动画以低速开始;
●ease-out:动画以低速结束;
●ease-in-out:动画以低速开始和结束;
●cubic-bezier(n,n,n,n):使用 cubic-bezier() 函数来定义动画的播放速度,参数的取值范围为 0 到 1 之间的数值。
4. animation-delay属性:定义动画什么时候开始。
●time:可选。定义动画开始前等待的时间,以秒或毫秒计。默认值为0。
注意:单位可以说秒(s)或毫秒(ms)。
5. animation-iteration-count属性:定义动画应该播放多少次。
属性的可选值如下:
6. animation-direction属性:定义是否循环交替反向播放动画。
●normal:默认值。动画正常播放;
●reverse:动画反向播放;
●alternate:动画在奇数次(1、2、5…)正向播放,在偶数次(2、4、6…)反向播放;
●alternate-reverse:动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。
7. animation-fill-mode 属性:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
注意:默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
●none 默认值。:动画在动画执行之前和之后不会应用任何样式到目标元素;
●forwards:在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值;
●backwards :动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 “normal” 或 “alternate” 时)或 to 关键帧中的值(当 animation-direction 为 “reverse” 或 “alternate-reverse” 时);
●both 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
8.animation-play-state:指定动画是否正在运行或已暂停。
●paused:指定暂停动画;
●running:指定正在运行的动画。
9. initial:设置属性为其默认值。
●initial:关键字用于设置 CSS 属性为它的默认值;
●initial:关键字可用于任何 HTML 元素上的任何 CSS 属性。
10. inherit:从父元素继承属性。
●inherit:关键字指定一个属性应从父元素继承它的值;
●inherit:关键字可用于任何 HTML 元素上的任何 CSS 属性。
animation
animation 属性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 几个属性的简写形式,通过 animation 属性可以同时定义上述的多个属性,语法格式如下:
animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state;
其中每个参数分别对应上面介绍的各个属性,如果省略其中的某个或多个值,则将使用该属性对应的默认值。
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>动画</title><style>.box1{width:700px;height:500px;background-color:silver;}.box2{width:100px;height:100px;background-color:#bfa;margin-left:10px;/*animation-name:test;*//*animation-duration:4s;*//*animation-timing-function:linear;*//*animation-iteration-count:4;*//*animation-direction:alternate;*//*animation-fill-mode:backwards;*//*animation-delay:2s;*/animation:test2slinear1s4alternate;}/*定义动画关键帧,关键帧的名字为test*/@keyframestest{/*from表示动画的开始位置,也可以使用0%来表示。*/from{margin-left:50px;background-color:orange;}/*to表示动画的结束位置,也可以使用100%来表示。*/to{margin-left:600px;background-color:yellow;}}/*控制动画的运行*//*.box1:hover.box2{animation-play-state:paused;}*/</style></head><body><div><div></div></div></body></html>