animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现细腻且灵活。在 CSS3 中是由属性keyframes来完成逐帧动画的。
语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;@keyframes用法
@keyframes name {
from {
properties: value;
}
percentage {
properties: value;
}
to {
properties: value;
}
}- name：动画名称，自己命名；
- percentage：百分比值，可添加多个百分比值；
- properties：样式属性名，例如：
color、left、width等等。
属性
| 属性值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
| initial | 设置属性为其默认值。 |
| inherit | 从父元素继承属性。 |
animation-name
设置动画名称，可同时赋值多个动画名称，用，隔开
animation-name:name1,name2,name3;animation-duration
定义动画完成一个周期需要多少秒或毫秒，默认为0
animation-duration:2s;
<!--设置动画在两秒内完成-->animation-timing-function
指定动画将如何完成一个周期。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。
默认值为ease
语法：animation-timing-function:value;
| value | 说明 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
animation-delay
定义动画什么时候开始
animation-delay 值单位可以是秒（s）或毫秒（ms）
提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。
默认值为0
animation-delay:2s;
<!--等待两秒开始动画-->animation-iteration-count
定义动画应该播放多少次，默认为1次
animation-iteration-count:3;
<!--播放三次动画-->animation-direction
定义是否循环交替反向播放动画，默认值为normal
注意：如果动画被设置为只播放一次，该属性将不起作用
语法：animation-direction : value;
| value | 说明 |
|---|---|
| normal | 默认值。动画按正常播放。 |
| reverse | 动画反向播放。 |
| alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 |
| alternate-reverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 |
| initial | 设置该属性为它的默认值。请参阅 initial。 |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
animation-play-state
控制动画的播放状态：running代表播放，而paused代表停止播放，running为默认值
animation-play-state:paused;
<!--停止动画-->参考用例：
<style>
.div2
{
border: 1px solid grey;
width: 500px;
height: 500px;
margin-left: 500px;
background-color: skyblue;
}
.div1
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:normal;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow;border-radius: 50%; left:400px; top:0px;}
50% {background:blue;border-radius: 50%; left:400px; top:400px;}
75% {background:green; left:0px; top:400px;}
100% {background:red; left:0px; top:0px;}
}
</style>
<body>
<div class="div2">
<div class="div1"></div>
</div>
</body>动画效果可运行查看
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
