css3动画效果抖动

CSS3动画效果之抖动

在CSS3中，可以使用@keyframes规则来定义动画的关键帧，同时利用animation属性来控制动画的播放方式。而抖动动画就是通过利用关键帧来实现的。

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

以上代码定义了一个名为shake的类，实现了一个0.5秒时长、无限循环播放的抖动动画效果。

通过@keyframes规则中定义的10个关键帧，分别将元素进行左右移动，实现了抖动效果。transform属性可以实现元素的移动、旋转、缩放等变换效果。

在实际开发中，抖动动画可以用来增加页面的趣味性、时髦感。但是过度使用抖动动画会降低页面的用户体验，也会让用户感到疲惫。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！