css3 动画 animation

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>

css3 动画 animation

推荐阅读