css实现快速抖动效果_css3实现元素抖动效果

代码不多，不截图了，可自行尝试

说明

css部分比较冗余，是因为考虑到了适配情况。可酌情删减

-webkit-animation-name: shaky-slow; // webkit内核

-ms-animation-name: shaky-slow; // ie内核

animation-name: shaky-slow; // 原生

animation-duration: 4s; // 动画执行时间

animation-delay: 0s; // 动画等待时间

animation-iteration-count: infinite; // 动画执行次数，infinite为一直执行

animation-timing-function: ease-in-out; // 动画执行速度

animation-delay: 0s; // 动画延时时间

animation-play-state: running; // 动画执行状态，一般没必要parse

元素标签

文字文字文字

css部分

.shaky {

display: inline-block;

padding: 1px;

font-size: 12px;

-webkit-transform-origin: center center;

-ms-transform-origin: center center;

transform-origin: center center;

-webkit-animation-name: shaky-slow;

-ms-animation-name: shaky-slow;

animation-name: shaky-slow;

-webkit-animation-duration: 4s;

-ms-animation-duration: 4s;

animation-duration: 4s;

-webkit-animation-iteration-count: infinite;

-ms-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-timing-function: ease-in-out;

-ms-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

-webkit-animation-delay: 0s;

-ms-animation-delay: 0s;

animation-delay: 0s;

-webkit-animation-play-state: running;

-ms-animation-play-state: running;

animation-play-state: running;

}

@-webkit-keyframes shaky-slow {

0% {

-webkit-transform: translate(0px, 0px) rotate(0deg);

}

2% {

-webkit-transform: translate(-1px, 1.5px) rotate(1.5deg);

}

4% {

-webkit-transform: translate(1.3px, 0px) rotate(-0.5deg);

}

6% {

-webkit-transform: translate(1.4px, 1.4px) rotate(-2deg);

}

8% {

-webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg);

}

10% {

-webkit-transform: translate(1.4px, 0px) rotate(-2deg);

}

12% {

-webkit-transform: translate(-1.3px, -1px) rotate(-2deg);

}

14% {

-webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg);

}

16% {

-webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg);

}

18% {

-webkit-transform: translate(1.3px, -1.3px) rotate(-2deg);

}

20% {

-webkit-transform: translate(1px, 1px) rotate(-0.5deg);

}

22% {

-webkit-transform: translate(1.3px, 1.5px) rotate(-2deg);

}

24% {

-webkit-transform: translate(-1.4px, -1px) rotate(2deg);

}

26% {

-webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg);

}

28% {

-webkit-transform: translate(1.6px, -1.6px) rotate(-2deg);

}

30% {

-webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg);

}

32% {

-webkit-transform: translate(-1px, 0px) rotate(2deg);

}

34% {

-webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg);

}

36% {

-webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg);

}

38% {

-webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg);

}

40% {

-webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg);

}

42% {

-webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg);

}

44% {

-webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg);

}

46% {

-webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg);

}

48% {

-webkit-transform: translate(1px, 1.6px) rotate(1.5deg);

}

50% {

-webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg);

}

52% {

-webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg);

}

54% {

-webkit-transform: translate(1.6px, -1px) rotate(-2deg);

}

56% {

-webkit-transform: translate(1.3px, -1.6px) rotate(-2deg);

}

58% {

-webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg);

}

60% {

-webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg);

}

62% {

-webkit-transform: translate(0px, 0px) rotate(-1.5deg);

}

64% {

-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);

}

66% {

-webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg);

}

68% {

-webkit-transform: translate(0px, -1.6px) rotate(-2deg);

}

70% {

-webkit-transform: translate(-1.6px, 1px) rotate(1.5deg);

}

72% {

-webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);

}

74% {

-webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg);

}

76% {

-webkit-transform: translate(1.4px, 1px) rotate(-0.5deg);

}

78% {

-webkit-transform: translate(-1px, 1.4px) rotate(2deg);

}

80% {

-webkit-transform: translate(1.4px, 1.6px) rotate(2deg);

}

82% {

-webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg);

}

84% {

-webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg);

}

86% {

-webkit-transform: translate(1px, 1.4px) rotate(-2deg);

}

88% {

-webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg);

}

90% {

-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);

}

92% {

-webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);

}

94% {

-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);

}

96% {

-webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg);

}

98% {

-webkit-transform: translate(1.3px, 1px) rotate(-0.5deg);

}

}

@keyframes shaky-slow {

0% {

transform: translate(0px, 0px) rotate(0deg);

}

2% {

transform: translate(-1px, 1.5px) rotate(1.5deg);

}

4% {

transform: translate(1.3px, 0px) rotate(-0.5deg);

}

6% {

transform: translate(1.4px, 1.4px) rotate(-2deg);

}

8% {

transform: translate(-1.3px, -1px) rotate(-1.5deg);

}

10% {

transform: translate(1.4px, 0px) rotate(-2deg);

}

12% {

transform: translate(-1.3px, -1px) rotate(-2deg);

}

14% {

transform: translate(1.5px, 1.3px) rotate(1.5deg);

}

16% {

transform: translate(1.5px, -1.5px) rotate(-1.5deg);

}

18% {

transform: translate(1.3px, -1.3px) rotate(-2deg);

}

20% {

transform: translate(1px, 1px) rotate(-0.5deg);

}

22% {

transform: translate(1.3px, 1.5px) rotate(-2deg);

}

24% {

transform: translate(-1.4px, -1px) rotate(2deg);

}

26% {

transform: translate(1.3px, -1.3px) rotate(0.5deg);

}

28% {

transform: translate(1.6px, -1.6px) rotate(-1.5deg);

}

30% {

transform: translate(-1.3px, -1.3px) rotate(-1.5deg);

}

32% {

transform: translate(-1px, 0px) rotate(2deg);

}

34% {

transform: translate(1.3px, 1.3px) rotate(-0.5deg);

}

36% {

transform: translate(1.3px, 1.6px) rotate(1.5deg);

}

38% {

transform: translate(1.3px, -1.6px) rotate(1.5deg);

}

40% {

transform: translate(-1.4px, -1px) rotate(-0.5deg);

}

42% {

transform: translate(-1.4px, 1.3px) rotate(-0.5deg);

}

44% {

transform: translate(-1.6px, 1.4px) rotate(0.5deg);

}

46% {

transform: translate(-2.1px, -1.3px) rotate(-0.5deg);

}

48% {

transform: translate(1px, 1.6px) rotate(1.5deg);

}

50% {

transform: translate(1.6px, 1.6px) rotate(1.5deg);

}

52% {

transform: translate(-1.4px, 1.6px) rotate(0.5deg);

}

54% {

transform: translate(1.6px, -1px) rotate(-2deg);

}

56% {

transform: translate(1.3px, -1.6px) rotate(-2deg);

}

58% {

transform: translate(-1.3px, -1.6px) rotate(0.5deg);

}

60% {

transform: translate(1.3px, 1.6px) rotate(-0.5deg);

}

62% {

transform: translate(0px, 0px) rotate(-1.5deg);

}

64% {

transform: translate(-1.6px, -1.6px) rotate(-2deg);

}

66% {

transform: translate(1.6px, -1.6px) rotate(0.5deg);

}

68% {

transform: translate(0px, -1.6px) rotate(-2deg);

}

70% {

transform: translate(-1.6px, 1px) rotate(1.5deg);

}

72% {

transform: translate(-1.6px, 1.6px) rotate(2deg);

}

74% {

transform: translate(1.3px, -1.6px) rotate(-0.5deg);

}

76% {

transform: translate(1.4px, 1px) rotate(-0.5deg);

}

78% {

transform: translate(-1px, 1.4px) rotate(2deg);

}

80% {

transform: translate(1.4px, 1.6px) rotate(2deg);

}

82% {

transform: translate(-1.6px, -1.6px) rotate(-0.5deg);

}

84% {

transform: translate(-1.4px, 1.4px) rotate(-2deg);

}

86% {

transform: translate(1px, 1.4px) rotate(-2deg);

}

88% {

transform: translate(-1.4px, 1.4px) rotate(-1.5deg);

}

90% {

transform: translate(-1.6px, -1.6px) rotate(-2deg);

}

92% {

transform: translate(-1.4px, 1.6px) rotate(2deg);

}

94% {

transform: translate(-1.6px, -1.6px) rotate(-2deg);

}

96% {

transform: translate(-1.4px, 1.3px) rotate(-2deg);

}

98% {

transform: translate(1.3px, 1px) rotate(-0.5deg);

}

}