1.animation要通过 @keyframes 规则
keyframes-selector是动画时长的百分比 【0-100% from（与 0% 相同） to（与 100% 相同）】
例如：
@keyframes name{0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}}
2.animation-timing-function就是规定动画的速度曲线。默认是 “ease”。
linear 动画从头到尾的速度是相同ease 默认。动画以低速开始，然后加快，在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值
代码如下
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 @keyframes move {
11 /*Y轴移动*/
12 /*0%{transform: translateY(0)} !*0%可以替换为from*!*/
13 /*50%{transform: translateY(500px)}*/
14 /*100%{transform: translateY(0px)} !*100%可以替换为to*!*/
15
16
17 /*旋转360°*/
18 0%{transform: rotate(0)}
19 100%{transform: rotate(360deg)} /*如果不是起始位置和终止位置就会出现卡顿*/
20 }
21 #div1{
22 width: 300px;
23 height: 300px;
24 margin: 100px auto 0;
25 background: lightcoral;
26 animation:move 1s linear 5s infinite} /*move 2s动画时间为2s，linear 5s为延时5s开始动，执行次数,其中infinite为无限运动下去可改为数字*/
27 </style>
28 </head>
29 <body>
30 <div id="div1"></div>
31 </body>
32 </html>