前端css动画实现上下悬浮浮动效果

div{
    width: 100px;
    height: 100px;
    background:blue;
    animation: bounce-down 1.8s linear infinite;
}

@-webkit-keyframes bounce-down {
    25% {
      -webkit-transform: translateY(-10px);
    }
    50%, 100% {
      -webkit-transform: translateY(0);
    }
    75% {
      -webkit-transform: translateY(10px);
    }
}