html部分
<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause"
@change="CheckboxChange">
</checkbox-group>
css部分:
动画名称
.shake-horizontal {
animation-name: shake-horizontal;
animation-duration: 100ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-play-state: running;
}
动画效果
@keyframes shake-horizontal {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
2% {
transform: translate(-4px, 0px) rotate(0deg);
}
4% {
transform: translate(2px, 0px) rotate(0deg);
}
6% {
transform: translate(-3px, 0px) rotate(0deg);
}
8% {
transform: translate(9px, 0px) rotate(0deg);
}
10% {
transform: translate(2px, 0px) rotate(0deg);
}
12% {
transform: translate(-6px, 0px) rotate(0deg);
}
14% {
transform: translate(-7px, 0px) rotate(0deg);
}
16% {
transform: translate(2px, 0px) rotate(0deg);
}
18% {
transform: translate(7px, 0px) rotate(0deg);
}
20% {
transform: translate(-1px, 0px) rotate(0deg);
}
22% {
transform: translate(-10px, 0px) rotate(0deg);
}
24% {
transform: translate(-10px, 0px) rotate(0deg);
}
26% {
transform: translate(3px, 0px) rotate(0deg);
}
28% {
transform: translate(-5px, 0px) rotate(0deg);
}
30% {
transform: translate(4px, 0px) rotate(0deg);
}
32% {
transform: translate(-6px, 0px) rotate(0deg);
}
34% {
transform: translate(-2px, 0px) rotate(0deg);
}
36% {
transform: translate(-6px, 0px) rotate(0deg);
}
38% {
transform: translate(-2px, 0px) rotate(0deg);
}
40% {
transform: translate(4px, 0px) rotate(0deg);
}
42% {
transform: translate(8px, 0px) rotate(0deg);
}
44% {
transform: translate(-3px, 0px) rotate(0deg);
}
46% {
transform: translate(-10px, 0px) rotate(0deg);
}
48% {
transform: translate(4px, 0px) rotate(0deg);
}
50% {
transform: translate(-6px, 0px) rotate(0deg);
}
52% {
transform: translate(6px, 0px) rotate(0deg);
}
54% {
transform: translate(-8px, 0px) rotate(0deg);
}
56% {
transform: translate(5px, 0px) rotate(0deg);
}
58% {
transform: translate(9px, 0px) rotate(0deg);
}
60% {
transform: translate(7px, 0px) rotate(0deg);
}
62% {
transform: translate(1px, 0px) rotate(0deg);
}
64% {
transform: translate(2px, 0px) rotate(0deg);
}
66% {
transform: translate(-2px, 0px) rotate(0deg);
}
68% {
transform: translate(-7px, 0px) rotate(0deg);
}
70% {
transform: translate(-1px, 0px) rotate(0deg);
}
72% {
transform: translate(-6px, 0px) rotate(0deg);
}
74% {
transform: translate(5px, 0px) rotate(0deg);
}
76% {
transform: translate(0px, 0px) rotate(0deg);
}
78% {
transform: translate(9px, 0px) rotate(0deg);
}
80% {
transform: translate(-3px, 0px) rotate(0deg);
}
82% {
transform: translate(8px, 0px) rotate(0deg);
}
84% {
transform: translate(-2px, 0px) rotate(0deg);
}
86% {
transform: translate(-1px, 0px) rotate(0deg);
}
88% {
transform: translate(-3px, 0px) rotate(0deg);
}
90% {
transform: translate(4px, 0px) rotate(0deg);
}
92% {
transform: translate(0px, 0px) rotate(0deg);
}
94% {
transform: translate(4px, 0px) rotate(0deg);
}
96% {
transform: translate(2px, 0px) rotate(0deg);
}
98% {
transform: translate(-2px, 0px) rotate(0deg);
}
}