CSS - 容器上下浮动动画

效果图

实现代码

<div class="trans"></div>

.trans{
    /* 随便来点样式 */
    height: 200px;
    width: 200px;
    background: red;
    /* END */

    /* 引入动画(1.3s可控制速度) */
    animation: heart 1.3s ease-in-out infinite alternate;
    /* END */
}

@keyframes heart{
    from {transform:translate(0,0) }
    to {transform:translate(0,30px)}/* 下浮高度 */
}