动画
写法：(@keyframes,animation)
<title>Document</title>
<style>
div{
width: 200px;
height: 400px;
background-color: #ccc;
animation: move1 5s infinite ;
}
@keyframes move1{
from{
background-color: red;
}
to{
background-color: green;
width: 200px;
height: 200px;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div>动画</div>
</body>
补充过渡
steps，一下一下变换的效果，和linear属于不同的效果的
播放时间一定是在延迟时间前面
无需按顺序写
必须要用的两个属性是：name、播放时间duration、
总结
backwards：第一帧状态
forwards：最后一帧状态
fill-mode暂停动画;分两种：
direction动画执行方向
iteration-count重复次数
delay延迟时间
timing-function速度曲线默认值是ease，linear一般都是常用的。匀速的意思
duration动画时长
animation: name
