实现落入雨滴的效果：

body,html{
    height: 100%;
}

#content{
    position: relative;
    height: 100%;
    background-color: #ffffff;
    overflow: hidden;
}

.raindrop{
    position: absolute;
    width: 6px;
    height: 8px;
    background-color: #99a9bf;
    clip-path: ellipse(10% 30% at 50% 50%);
    transform: scale(8);
    opacity: 0;
    animation:move 1.2s cubic-bezier(0.54,0,0.18,0.34) infinite;
}

@keyframes move {
    0%{
        opacity: 0;
    }
    40%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        //实现3d的效果
        transform:translate3d(10px,100vh,-10px);
    }
}

尝试一下 »

注意（1）：

animation-play-state 也是 animation 的简写属性，但在 -webkit- 中不适用：

animation: myfirst 5s infinite linear paused;

即：

animation-name: myfirst;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: paused;

但, 在 -webkit- 中，-webkit-animation-play-state 却是单独的，不能用 -webkit-animation 包含：

-webkit-animation: myfirst 5s infinite linear paused;

无效！！！！！

必须写为：

-webkit-animation: myfirst 5s infinite linear;
-webkit-animation-play-state: paused;

---------------------------------------

注意（2）：

animation 并不太注重语法顺序（除了 【duration / 动画用时】 一定在 【delay / 动画延时】 之前），但在 -webkit-animation （主要针对 "Safari"）中，不能以 -webkit-animation-name 来结尾：

animation: myfirst 5s linear 2s infinite alternate;
animation: 5s linear 2s infinite myfirst alternate;
animation: 5s 2s infinite alternate linear myfirst;
// etc... 都是可以的

但在 Safari 中, 以下语句无法运行：【动画名结尾】

-webkit-animation: 5s linear 2s infinite alternate myfirst;

【动画名称】不能作为结尾属性, 以下语句可运行：

-webkit-animation: myfirst 5s linear 2s infinite alternate;
-webkit-animation: 5s linear 2s infinite myfirst alternate;
-webkit-animation: 5s 2s infinite myfirst alternate linear;