.shaky {
display: inline-block;
transform-origin: center center;
animation-name: shaky-slow;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-play-state: running;
}
@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);
}
}
display: inline-block; 显示类型设置为内联块。
display: inline-block; 显示类型设置为内联块。
padding: 1px; 四周填充的宽度为1像素。
transform-origin: center center; 该设置是动画起源点的位置，在这里是元素中心。
animation-name: shaky-slow; 用于调用名为"shaky-slow"的动画效果。
animation-duration: 4s; 动画运行一圈所需时间为4秒。
animation-iteration-count: infinite; 动画将无限次重复。
animation-timing-function: ease-in-out; 动画有一个慢-快-慢的速度曲线。
animation-delay: 0s; 动画在开始前的延迟时间为0秒。
animation-play-state: running; 动画当前是播放状态。