@keyframes用法

2021-12-04 09:35:03 作者：互联网

CSS3的@keyframes用法详解:
@keyframes与animation属性是密切相关的

一.基本知识:
keyframes翻译成中文，是"关键帧"的意思，如果用过flash应该对这个比较好理解，当然不会flash也没有任何问题。
使用transition属性也能够实现过渡动画效果，但有点儿粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以与@keyframes结合使用将指定时间段内的动画划分的更为具体一些。

语法结构:

1 @keyframes animationname {keyframes-selector {css-styles;}}

参数解析:
1、animationname:声明动画的名称。
2、keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用 "from" 和 "to"的形式。
　"from" 和 "to"的形式等价于 0% 和 100%。
　这里建议始终使用百分比形式。

 1 <!DOCTYPE html>   
 2 <html>   
 3 <head>   
 4 <meta charset=" utf-8">   
 5 <meta name="author" content="http://www.softwhy.com/" />   
 6 <title>蚂蚁部落</title>  
 7 <style type="text/css">  
 8 div{ 
 9   width:100px; 
10   height:100px; 
11   background:red; 
12   position:relative; 
13      
14   animation:theanimation 5s infinite alternate; 
15   -webkit-animation:theanimation 5s infinite alternate ; 
16   -moz-animation:theanimation 5s infinite alternate ; 
17   -o-animation:theanimation 5s infinite alternate ; 
18   -ms-animation:theanimation 5s infinite alternate ; 
19 } 
20 @keyframes theanimation{ 
21   from {left:0px;} 
22   to {left:200px;} 
23 } 
24 @-webkit-keyframes theanimation{ 
25   from {left:0px;} 
26   to {left:200px;} 
27 } 
28 @-moz-keyframes theanimation{ 
29   from {left:0px;} 
30   to {left:200px;}  
31 } 
32 @-o-keyframes theanimation{ 
33   from {left:0px;} 
34   to {left:200px;}  
35 } 
36 @-ms-keyframes theanimation{ 
37   from {left:0px;} 
38   to {left:200px;} 
39 } 
40 </style> 
41 </head> 
42 <body> 
43 <div></div> 
44 </body> 
45 </html>

上面代码实现了简单的动画，下面简单做一下分析:
1.使用@keyframes定义了一个名为theanimation的动画。
2.@keyframes声明的动画名称要和animation配合使用。
3.from to等价于0%-100%，所以就是规定5s内做了一件事情。

标签：动画,theanimation,keyframes,用法,animation,5s,left
来源： https://www.cnblogs.com/Wang12138/p/15640962.html