css3 动画，水滴 滴落的效果

 

实现代码：

              <div class="drop"></div>

.drop {
  position: relative;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid black;
  animation: drop 2s infinite;
}
 
@keyframes drop {
  0% {
    opacity: 1;
    transform: translateY(-10px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100px);
  }
}