语法
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 ????12345645 ????</h1>46 ??</div>47 ?</body>48 </html> 注：运行代码清除注释。代码中注释非html注释格式。
css3+h5学习（一、animation做动态渐变字）
原文地址：https://www.cnblogs.com/moxiao-lmx/p/10218501.html