css图片晃动动画怎么做

在网页设计中，动态的特效可以增加页面的吸引力。如何制作一个让图片晃动的动画呢？这就要用到CSS的动画效果了。

首先，在HTML中添加需要使用的图片。

    <img src="图片地址" class="shake">

接着，在CSS中定义动画效果：

    .shake {
        animation: shake 0.5s infinite;
    }
    
    @keyframes shake {
        10%,90% {
            transform: translate3d(-1px,0);
        }
        
        20%,80% {
            transform: translate3d(2px,0);
        }
        
        30%,50%,70% {
            transform: translate3d(-4px,0);
        }
        
        40%,60% {
            transform: translate3d(4px,0);
        }
    }

在这里，我们定义了一个名为“shake”的类，并在其中添加了一个animation属性。该属性决定使用的动画类型及时间，这里我们采用了shake这个名字，0.5s表示动画时间，infinite表示无限循环。接下来，我们通过@keyframes来定义动画的每个阶段。可以看到，通过逐渐改变transform属性，使得图片不断晃动。

最后，需要注意的是，在不同浏览器中，CSS的语法有所区别，所以需要使用浏览器统一前缀来兼容不同的浏览器：

    @-webkit-keyframes shake {
        /*同上*/
    }
    
    @-moz-keyframes shake {
        /*同上*/
    }
    
    @-o-keyframes shake {
        /*同上*/
    }
    
    @keyframes shake {
        /*同上*/
    }

现在，我们就成功地使用CSS完成了一段让图片晃动的动画效果。