The latest articles on DEV Community by zhoupeihuang (@zhoupeihuang). https://dev.to/zhoupeihuang https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F438361%2F3d51ea3f-f61f-47c2-8910-f4b9659fd46e.jpeg https://dev.to/zhoupeihuang en zhoupeihuang Thu, 23 Jul 2020 02:05:29 +0000 https://dev.to/zhoupeihuang/jitter-effect-of-error-prompt-4knp https://dev.to/zhoupeihuang/jitter-effect-of-error-prompt-4knp <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7947WGYX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/d1pamr80q4m97kb954kz.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7947WGYX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/d1pamr80q4m97kb954kz.jpg" alt="Alt Text"></a></p> <div class="highlight"><pre class="highlight plaintext"><code>.around{<br> animation: move 1.5s 0s 2;<br> -webkit-animation:move 1.5s 0s 2;;<br> transform-origin: bottom;<br> -webkit-transform-origin: bottom;<br> } <p>@keyframes move { <br> 0%,65% {<br> -webkit-transform: rotate(0deg);<br> transform: rotate(0deg);<br> }<br> 70% {<br> -webkit-transform: rotate(6deg);<br> transform: rotate(6deg);<br> }<br> 75% {<br> -webkit-transform: rotate(-6deg);<br> transform: rotate(-6deg);<br> } <br> 80% {<br> -webkit-transform: rotate(6deg);<br> transform: rotate(6deg);<br> }<br> 85% {<br> -webkit-transform: rotate(-6deg);<br> transform: rotate(-6deg);<br> }<br> 90% {<br> -webkit-transform: rotate(6deg);<br> transform: rotate(6deg);<br> }<br> 95% {<br> -webkit-transform: rotate(-6deg);<br> transform: rotate(-6deg);<br> }<br> 100% {<br> -webkit-transform: rotate(0deg);<br> transform: rotate(0deg);<br> }<br> }</p> <p>@-webkit-keyframes move {<br> 0%,<br> 65% {<br> -webkit-transform: rotate(0deg);<br> transform: rotate(0deg);<br> }<br> 70% {<br> -webkit-transform: rotate(6deg);<br> transform: rotate(6deg);<br> }<br> 75% {<br> -webkit-transform: rotate(-6deg);<br> transform: rotate(-6deg);<br> }<br> 80% {<br> -webkit-transform: rotate(6deg);<br> transform: rotate(6deg);<br> }<br> 85% {<br> -webkit-transform: rotate(-6deg);<br> transform: rotate(-6deg);<br> }<br> 90% {<br> -webkit-transform: rotate(6deg);<br> transform: rotate(6deg);<br> }<br> 95% {<br> -webkit-transform: rotate(-6deg);<br> transform: rotate(-6deg);<br> }<br> 100% {<br> -webkit-transform: rotate(0deg);<br> transform: rotate(0deg);<br> }<br> }<br> </p></code></pre></div> <h3> <br> <br> <br> The effect<br> </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--V3PrqKNr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/37fvaj0vhx0x7807wfxo.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--V3PrqKNr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/37fvaj0vhx0x7807wfxo.gif" alt="Alt Text"></a></p> css animation