Pure CSS simple warning box plus jitter effect

This effect of the warning box, error will jitter

. Alert-box { width: px ; border-style: outset ; position: relative ; color:#555 ; Border-radius:tenpx ; font-family:tahoma,geneva,arial,sans-serif ; font-size: onepx ; padding:     ten px px ten px; margin:auto ; display: none ;}      . Alert-box span {  font-weight:bold;       text-transform:uppercase; }      . Error {  background:#ffecec no-repeat px ;       Border:1px solid #f5aca6; }

Animation effect of jquery, animate for loop 4 times to move around

var  $box = $ (                  Span class= "hljs-string" > Alert-box ' );                  $box. HTML ( ' <span>error: </span> '  + data.error);                  $box. Show (); var  box_left = ($ (window). Width ()-$box. Width ())/2                  ; for  (var  i=1 ; 4  >=i; i++) {$box. Animate ({left:-(40 -10  *i)                      },50 ); $box. Animate ({left:+2  * (40 -                  10  *i)},50 ); }

Plain CSS simple warning box plus jitter effect