animation 英[ˌænɪˈmeɪʃn] 美[ˌænəˈmeʃən]
n. 生气，活泼; 动画片制作，动画片摄制; [影视] 动画片;
CSS3 animation（动画） 属性
语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
注意：Internet Explorer 9 及其之前的版本不支持 animation-direction 属性。
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
注意：
- animation-name和animation-duration必须设置，其他可选
- 通常根据不同内核的浏览器要加上不同的前缀，比如：chrome、safari：@-webkit-keyframes
在CSS选择器中，使用animition动画属性
声明一个动画（关键帧）格式如下：
@keyframes name{
from{
}
to{
}
}
或
@keyframes name{
0%{
}
50%{
}
100%{
}
}
①每个阶段用百分比表示，从0%到100%
②起止必须设置，即0%和100%或者from和to
例子：用animation属性制作颜色不停变化的正方形
1、定义一个动画
@-webkit-keyframes myframe{
0%{
background-color: #7FFFD4;
}
25%{
background-color: coral;
}
50%{
background-color: cornflowerblue;
}
100%{
background-color: cyan;
}
}
2、在网页添加div
<div class="div1"></div>
3、给div定义属性
.div1{
width: 500px;
height: 500px;
background-color: #7FFFD4;
-webkit-animation: myframe 5s ease infinite;
}
完整实例
Tips:You can change the code before run.
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1160.html
赞 (1)
微信扫一扫 
支付宝扫一扫 