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>
动画效果可运行查看