CSS动画的使用
过渡动画
transition-property指定对哪个html元素的css属性及逆行平滑渐变处理
transition-duration 指定渐变持续的时间
transition-timing-function 渐变的速度 支持如下几个值
ease动画开始时较慢，然后速度加快，达到最快时间在减慢速度
linear 动画开始到结束保持不变
ease-in 动画开始满，然后加快
ease-out 动画刚开始最快，然后速度减慢
2帧动画
animatio-name 设置动画名称
anmiation-duration 指定渐变持续的时间
animation-timing-function 渐变的速度 支持如下几个值
ease动画开始时较慢，然后速度加快，达到最快时间在减慢速度
linear 动画开始到结束保持不变
ease-in 动画开始满，然后加快
ease-out 动画刚开始最快，然后速度减慢
animation-delay 指定动画延迟多长时间之后执行
animation-iteration-count 执行几次 infinite无限执行
animation-direction 设置动画的方向 alternate交替
animation aaa 4s linera 2s infinite alternate; 调用动画的取值不分先后如果有两个时间 第一个表示动画时长，第二个表示延迟时间
关于帧的定义
@keyframes aaa{
from|to|百分比{
属性1：值；
属性2：值；
.......
}
下面是一个简单的实例
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="/css/动画.css">
</head>
<body><div >aa</div>
</body>
</html>css
50%{width: 600px;height: 400px;background: red;border-radius: 150px;}100%{width: 400px;height: 200px;background: rgb(141, 237, 100);border-radius: 50px;}}div{width: 100px;height: 100px;background: burlywood;animation:aaa ;animation-duration: 6s;animation-timing-function: linear;animation-delay:2s ;/* animation-iteration-count:infinite; */animation-direction: alternate;}