CSS3 动画效果 animation

利用CSS3 的animation来创造酷炫的动画,在了解animation之前,我们先了解一下@keyframes ,就是关键帧,定义了动画的过程效果。

第一步:

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

@keyframes语法:

@keyframes animationName {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
或者全部写成百分比的形式:
@keyframes animationName {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}

对于一个”@keyframes”中的样式规则是由多个百分比构成的,如“0%”到”100%”之间,我们可以在这个规则中创建多个百分比,我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种在不断变化的效果,比如说移动,改变元素颜色,位置,大小,形状等,不过有一点需要注意的是,我们可以使用“fromt”“to”来代表一个动画是从哪开始,到哪结束,也就是说这个 “from”就相当于”0%”而”to”相当于”100%”。

第二步:

animation调用动画。

CSS3的animation类似于transition属性,他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性;而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点,css3的animation就需要明确的动画属性值,这也就是回到我们上面所说的,我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间段变化的效果。

animation属性:

animation-name (动画属性名)| animation-duration (动感持续时间 3s)| animation-timing-function (动画频率,速度)| animation-delay(动画延迟时间 2s) | animation-iteration-count (动画循环次数)| animation-direction (定义动画方式)| animation-play-state(动画播放状态)

1.animation-name :

是用来定义一个动画的名称。可以同时附几个animation给一个元素,我们只需要用逗号“,”隔开。

2.animation-duration:

是用来指定元素播放动画所持续的时间长,取值:

3.animation-timing-function:

语法:animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )

是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。跟transtion 一样。

4.animation-delay:

是用来指定元素动画开始时间。取值为

5.animation-iteration-count:

语法:animation-iteration-count:infinite | [, infinite | ]*

是用来指定元素播放动画的循环次数,其可以取值为数字,其默认值为“1”;infinite为无限次数循环。

6.animation-direction:

语法:animation-direction: normal | alternate [, normal | alternate]*

是用来指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。

7.animation-play-state

语法:animation-play-state:running | paused [, running | paused]*

主要是用来控制元素动画的播放状态。其主要有两个值,running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样,可以通过paused将正在播放的动画停下了,也可以通过running将暂停的动画重新播放,我们这里的重新播放不一定是从元素动画的开始播放,而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放,元素的样式将回到最原始设置状态。这个属性目前很少内核支持,所以只是稍微提一下。