关于关键帧的使用
CSS3的@keyframes用法详解：
@关键帧与动画属性密切相关。
一.基本知识：
关键帧，翻译成中文，意思是“关键帧”。如果你用过flash，你应该对此有更好的理解。当然，flash没有问题。
Transition属性也可以实现转场动画效果，但有点粗糙，因为它不能更精细地控制动画过程，比如只能控制某个属性在指定时间段内的转场，而动画属性可以结合@关键帧使用，将指定时间段内的动画分割成更具体的动画。
语法：
1 @关键帧animationname {关键帧-选择器{ CSS-style；}}
参数分辨率：
1.animationname:声明动画的名称。
2.关键帧-selector:用于划分动画的持续时间，可以采用百分比或“从”和“到”的形式。
“从”和“到”的形式相当于0%和100%。
这里建议始终使用百分比形式。
1 !DOCTYPE html
2 html
3头
4元字符集=’ utf-8 ‘
5 meta name=’ author ‘ content=’ http://www . soft why.com/’
6标题蚁族/标题
7样式类型=“文本/css”
8 div{
9宽度width:100px
10高：100像素；
11背景：红色；
12位置：相对；
13
14动画：动画5s无限交替；
15-web kit-animation : hea animation 5s无限交替；
16-moz-animation :动画5s无限交替；
17-o-animation :动画5s无限交替；
18-ms-animation :动画5s无限交替；
19 }
20 @关键帧图像
从{ left:0px}
22到{ left:200px}
23 }
24 @-网络工具包-图像的关键帧{
从{ left:0px}
26到{ left:200px}
27 }
28 @-moz-关键帧图像{
从{ left:0px}
30到{ left:200px}
31 }
图像的32 @-o-关键帧
从{ left:0px}
34到{ left:200px}
35 }
36 @-毫秒-图像的关键帧{
从{ left:0px}
38到{ left:200px}
39 }
40/风格
41/头
42车身
43分区/分区
44/车身
45 /html
上面的代码实现了一个简单的动画，下面是对：的简要分析。
1.使用@关键帧定义一个名为动画的动画。
2.由@关键帧声明的动画名称应该与动画一起使用。
3 .从到相当于0%-100%，所以意味着一件事在5秒内完成。
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/134418.html