[分享]css3摇晃动画

CSS3摇晃动画是一种常用的网页元素动画效果，它在用户交互体验上起到了很好的作用。

.box {
    animation: shake 0.5s linear infinite;
}
@keyframes shake {
    0% {
        transform: rotate(0deg);
    }
    50% {
         transform: rotate(5deg);
    }
    100% {
         transform: rotate(-5deg);
    }
} 

上述代码展示了一个摇晃动画的基本形式，其中.box是需要应用动画的元素，animation属性定义了动画效果的名称、持续时间、运动轨迹和循环次数。而@keyframes关键字用来描述动画的关键帧，其中0%表示动画开始状态，100%表示结束状态，中间的50%表示动画的过渡状态。

值得注意的是，为了保证动画的流畅性和兼容性，我们需要在动画定义中添加浏览器前缀：

.box {
    -webkit-animation: shake 0.5s linear infinite;
    -moz-animation: shake 0.5s linear infinite;
    -ms-animation: shake 0.5s linear infinite;
    animation: shake 0.5s linear infinite;
}
@-webkit-keyframes shake {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
         -webkit-transform: rotate(5deg);
    }
    100% {
         -webkit-transform: rotate(-5deg);
    }
}
@-moz-keyframes shake {
    0% {
        -moz-transform: rotate(0deg);
    }
    50% {
         -moz-transform: rotate(5deg);
    }
    100% {
         -moz-transform: rotate(-5deg);
    }
}
@-ms-keyframes shake {
    0% {
        -ms-transform: rotate(0deg);
    }
    50% {
         -ms-transform: rotate(5deg);
    }
    100% {
         -ms-transform: rotate(-5deg);
    }
}
@keyframes shake {
    0% {
        transform: rotate(0deg);
    }
    50% {
         transform: rotate(5deg);
    }
    100% {
         transform: rotate(-5deg);
    }
} 

至此，我们就学习了一种基本的CSS3动画效果，希望大家根据自己的实际需求，能够善加利用这种效果，提升自己网页的交互体验。