DEV Community

loading...

Jitter effect of error prompt

zhoupeihuang
chinese
・1 min read

Alt Text

.around{
animation: move 1.5s 0s 2;
-webkit-animation:move 1.5s 0s 2;;
transform-origin: bottom;
-webkit-transform-origin: bottom;
}

@keyframes move {
0%,65% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
70% {
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
75% {
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
}
80% {
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
85% {
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
}
90% {
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
95% {
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}

@-webkit-keyframes move {
0%,
65% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
70% {
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
75% {
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
}
80% {
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
85% {
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
}
90% {
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
95% {
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}




The effect

Alt Text

Discussion (0)