animation 属性是一个简写属性，用于设置六个动画属性：
1.animation-name 规定需要绑定到选择器的 keyframe 名称。
2.animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
3.animation-timing-function 规定动画的速度曲线。
4.animation-delay 规定在动画开始之前的延迟。
5.animation-iteration-count 规定动画应该播放的次，n或者infinite无限循环。
6.animation-direction 规定是否应该轮流反向播放动画。normal默认 ，alternate反方向。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
总结：
1.格式animation: 动画名称 花费时间 运动曲线 何时开始 循环次数 是否反方向;
2.一般省略后面的四个，只写名称和时间，后面四个默认依次为ease、0是、1、normal；
3.多个动画时，用逗号隔开，分开写会覆盖效果；
4. 动画都是先声明，在调用，名称必须一致，而且一般的项目会把动画声明 @keyframes写在单独的文件里。
5.写了动画效果，就不需要再写过渡了，因为动画本身就是一种过渡效果，也是谁做动画就写在谁身上
<body> <div></div> </body>
div { width: 100px; height: 100px; background: rgb(207, 190, 190); animation: move 5s ease 0s infinite alternate,change 3s ease 0s infinite normal; } @keyframes move{ /* 第一种表达from……to…… */ from{ transform: translate(0); } to{ transform: translate(500px); } } @keyframes change { /* 第二种表达0%……100% */ 0%{ background: rgb(207, 190, 190); } 25%{ background: rgb(127, 233, 6); } 50% { background: rgb(12, 224, 118); } 75%{ background: rgb(154, 9, 238); } 100%{ background: rgb(231, 7, 112); } }
下雨动画：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- <title>Document</title> --> <script src="./node_modules/jquery/dist/jquery.js"></script> <script src="./test.js"></script> <style> .content{ width: 800px; height: 800px; position: relative; background: #f2f2f2; } .rain{ position: absolute; width: 20px; height: 36px; background: #ccc; clip-path: ellipse(10% 30% at 50% 50%); animation: rainDown 1s cubic-bezier(0.81, -0.04, 1, 0.6) 0s infinite normal; } @keyframes rainDown { 0%{ opacity: 0; } 20%{ opacity: 1; } 90%{ opacity: 1; } 100%{ opacity: 0; transform: translate(0,790px); } } </style> </head> <body> <div class="content"> <div class="rain"></div> </div> <script> let content = $('.content'); let initNumber = 0; for (let index = 0; index < 30; index++) { let lefts = Math.floor(Math.random()*40+2) initNumber += lefts; let div = $('<div>').addClass('rain').css({ 'left':`${initNumber}px`, 'top':`${lefts}px`, 'animation-delay':`${lefts/10}s`, }); content.append(div); } </script> </body> </html>
