玩转有趣的 CSS3 Animation 动画
CSS3 Animation动画浏览器支持情况:
各浏览器对css Animation技术的支持还是很不错的。
下面就来看一下如何玩转 CSS3 Animation 技术。
@keyframes 规则
如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
先来举一个栗子:
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
上方的CSS语句代表什么含义呢,听我慢慢道来:
-
首先添加声明 @keyframes 规则,就像我们在JavaScript中的 var 或者 function 关键字一样,告诉JavaScript我要声明一个变量或者声明一个函数语句。只不过 @keyframes 是告诉CSS我需要声明一组Animation。
-
紧接着一个空格再给你声明的这组Animation一个名字,不然当你需要在CSS的其他地方添加Animation的时候怎么知道是要用那一组呢,这里给他命名为 myfirst。(和js的变量命名规则几乎一样,不要使用CSS中的关键词或者保留关键词,不可以以数字开头等等,可以包含数字字母和下划线)。
-
好的,进入css块内,from关键词表示应用改动画的元素初始状态的属性是怎么样的,to关键词表示应用该动画的元素最终状态的CSS属性是怎么样的,你还可以省略 from 的初始状态:
@keyframes myfirst
{
to {background: yellow;}
}
表示当前元素从当前属性状态过渡到to关键词制定的状态。
当然除了使用 from 和 to 关键词,你还可以使用百分比表示动画进行的某个阶段:
@keyframes myfirst
{
0% {background: red;}
100% {background: yellow;}
}
当然0-100中间的值也是可以设置的:
@keyframes myfirst
{
0% {background: red;}
25% {background: green;}
50% {background: blue;}
100% {background: yellow;}
}
CSS3 Animation动画初体验
好的,以最后一组代码为例,看一下他的应用效果:
如下是源码:
<style>
@keyframes myfirst
{
0% {background: red;}
25% {background: green;}
50% {background: blue;}
100% {background: yellow;}
}
.myfirst-div{
width: 100px;
height: 100px;
animation: myfirst 1s ease infinite;
}
</style>
<div class="myfirst-div"></div>
关注点请放到这句上:
animation: myfirst 1s ease infinite;
类似于JavaScript中调用函数那样,这就相当于在CSS中调用动画,而animation的属性值就是我们给这个函数传入的参数们,当然,JavaScript中支持一种叫座函数重载的特性,CSS中也不例外,其实css中与animation技术有关的属性值一共有8个:
- animation-name : 规定 @keyframes 动画的名称。
- animation-duration : 规定 @keyframes 动画的名称。
- animation-timing-function : 规定 @keyframes 动画的名称。
- animation-delay : 规定 @keyframes 动画的名称。
- animation-iteration-count : 规定动画被播放(迭代)的次数。默认是 1。
- animation-direction : 规定动画是否在下一周期逆向地播放。默认是 “normal”。
- animation-play-state : 规定动画是否正在运行或暂停。默认是 “running”。
- animation-fill-mode : 规定对象动画时间之外的状态。
他们还有一种简写的形式,就像上方例子中那样全部跟在 animation 后即可:
animation: name duration timing-function delay iteration-count derection fill-mode;
注意:简写形式的最简化情况是只包含 animation-name 和 animation-duration,并且至少包含这两个属性值。
你可能发现了,为什么简写的形式只有7个参数呢,因为animation-play-state参数只能单独作为属性存在而非animation简写形式的一枚参数!
请看下方示例:
源码:
@keyframes mysecond{
0% {
background: red;
}
100% {
background: yellow;
}
}
.mysecond-div{
width: 100px;
height: 100px;
animation-name: mysecond;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: .2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
</style>
<div class="mysecond-div"></div>
同样他的简写形式:
.mysecond-div{
width: 100px;
height: 100px;
animation: mysecond 1s linear .2s infinite alternate;
animation-play-state: running;
}
逐一介绍animation的8个属性值
(1) animation-name
默认值: | none |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.animationName="mymove" |
为 @keyframes 动画规定一个名称
animation-name: keyframename|none;
值 | 描述 |
---|---|
keyframename | 规定需要绑定到选择器的 keyframe 的名称。 |
none | 规定无动画效果(可用于覆盖来自级联的动画)。 |
(2) animation-duration
animation-duration 属性定义动画完成一个周期所需要的时间,以秒或毫秒计。
默认值: | 0 |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.animationDuration="3s" |
animation-duration: time;
值 | 描述 |
---|---|
time | 规定完成动画所花费的时间。默认值是 0,意味着没有动画效果。 |
(3) animation-timing-function
animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。
默认值: | ease |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.animationTimingFunction="linear" |
animation-timing-function: value;
animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的。 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 |
ease-in | 动画以低速开始。 |
ease-out | 动画以低速结束。 |
ease-in-out | 动画以低速开始和结束。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
Steps(<number_of_steps>,<direction>) | 创建逐帧动画 |
(4) animation-delay
animation-delay 属性定义动画何时开始。允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。
默认值: | 0 |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.animationDelay="2s" |
(5) animation-iteration-count
animation-iteration-count 属性定义动画的播放次数。
默认值: | 1 |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.animationIterationCount=3 |
animation-iteration-count: n|infinite;
值 | 描述 |
---|---|
n | 定义动画播放次数的数值。 |
infinite | 规定动画应该无限次播放。 |
(6) animation-direction
animation-direction 属性定义是否应该轮流反向播放动画。如果 animation-direction 值是 “alternate”,则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。
默认值: | normal |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.animationDirection="alternate" |
animation-direction: normal|alternate;
值 | 描述 |
---|---|
normal | 默认值。动画应该正常播放。 |
alternate | 动画应该轮流反向播放。 |
(7) animation-play-state
animation-play-state 属性规定动画正在运行还是暂停。可以在 JavaScript 中使用该属性,这样就能在播放过程中暂停动画。
默认值: | running |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.animationPlayState="paused" |
animation-play-state: paused|running;
值 | 描述 |
---|---|
paused | 规定动画已暂停。 |
running | 规定动画正在播放。 |
(8) animation-fill-mode
animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。其属性值是由逗号分隔的一个或多个填充模式关键词。
默认值: | none |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.animationFillMode=none |
animation-fill-mode : none | forwards | backwards | both;
值 | 描述 |
---|---|
none | 不改变默认行为。 |
forwards | 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。 |
backwards | 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。 |
both | 向前和向后填充模式都被应用。 |