语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
- name->动画名 ，自定义(不可缺参数)
- duration->动画完成时间 ，以秒记(不可缺参数)
- timing-function->动画进行的速度，liner（默认）/ease/ease-in/ease-out/ease-in-out/cubic-bezier(0,0,0,0)
- delay->动画开始前的延迟，以秒记
- iteration-count->动画播放次数
- direction->是否轮流反向播放动画
- fill-mode->动画不播放时实用什么元素样式
- play-state->指定动画在运行或暂停
例子
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文档标题</title> 6 <style> 7 h1{ 8 9 } 10 div{ 11 width:150px; 12 height:100px; 13 text-align:center; 14 color:transparent;//设置字体颜色透明 15 -webkit-background-clip: text;//剪除背景中文本以外部分 16 background:red; 17 border:5px solid #567577; 18 border-radius:20px; 19 position:relative; 20 margin:5px; 21 22 //animation名是myfrist 10s完成动画 匀速播放 0s延迟 无限播放 奇数次正向播 23 //放偶数次反向播放 播放动画 24 25 animation:myfrist 10s linear 0s infinite alternate running; 26 -moz-animation:myfrist 10s linear 2s infinite alternate running; 27 -o-animation:myfrist 10s linear 2s infinite alternate running; 28 -webkit-animation:myfrist 10s linear 2s infinite alternate running; 29 } 30 @keyframes myfrist{ 31 0% {border-color:red;background-color:orange;} 32 20% {border-color:yellow; background-color:yellow;} 33 40% {border-color:blue; background-color:green;} 34 60% {border-color:green;background-color:blue; } 35 80% {border-color:red;background-color:indigo; 36 100% {border-color:green;background-color:violet; } 37 } 38 } 39 </style> 40 </head> 41 <body> 42 <div> 43 <h1> 44 123456 45 </h1> 46 </div> 47 </body> 48 </html>
注：运行代码清除注释。代码中注释非html注释格式。