DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

zhoupeihuang
zhoupeihuang

Posted on

Jitter effect of error prompt

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

Top comments (0)

DEV runs on 100% open source code known as Forem.

ย 
Contribute to the codebase or host your own.
ย 
Check these out! ๐Ÿ‘‡