[分享]css3动画震动效果

CSS3动画是前端开发中非常重要的一部分，它可以通过各种不同的效果给网站增加更多的动感和视觉效果。其中之一是CSS3动画中的震动效果，它可以让元素在页面上颤动起来，使页面更加生动有趣。.element...

CSS3动画是前端开发中非常重要的一部分，它可以通过各种不同的效果给网站增加更多的动感和视觉效果。其中之一是CSS3动画中的震动效果，它可以让元素在页面上颤动起来，使页面更加生动有趣。

.element{
    animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) infinite;
}

@keyframes shake {
    10%, 90%{
        transform: translate3D(-1px, 0, 0);
    }

    20%, 80%{
        transform: translate3D(2px, 0, 0);
    }

    30%, 50%, 70%{
        transform: translate3D(-4px, 0, 0);
    }

    40%, 60%{
        transform: translate3D(4px, 0, 0);
    }
} 

在上面的代码中，我们首先为需要震动的元素添加了一个动画属性：animation。该属性定义了我们将要使用的动画函数以及动画的结束时间。

接下来，我们使用了@keyframes关键字定义了一组动画的关键帧（即在整个动画过程中要改变的状态），这些状态定义了元素在不同时间点时的位置、大小和颜色等属性。在这种情况下，我们定义了四个时间点，分别是10%、20%、30%和40%的时间以及它们对应的元素位置。

最后，我们通过使用translate3D()方法，将元素向左或向右偏移若干像素，从而使元素在页面上震动起来。

通过这种方法，我们可以轻松地实现震动效果，同时还可以通过调整动画中的时间点和转换函数来改变震动的强度和速度。