css3动画之上下摆动

在前端开发中，我们有很多场景需要添加一些上下摆动的动画给我们的页面增添更加生动的交互,在这里我就不做过多的介绍了，直接上代码：

//首先要给你要添加动画的元素开启定位，并且设置动画名称
.arrow-case {
    position: fixed;
    bottom: -0.1rem;
    margin: auto;
    -webkit-animation: shaking 1s infinite; // shaking为动画名称，1s 动画执行时间，infinite 无限循环
    z-index: 50;
    }
// 下面就是动画的具体执行步骤
@keyframes shaking {

    0% {
        transform: translateY(-10px);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(-10px);
    }
}

这样就实现了元素上下循环摆动的效果。