You are here: Knowledge Base » Other » Shaking box animation

Shaking box animation

By default, Boxzilla offers you the choice between two simple animations for showing a box: slowly fading the box in or having it slide down.

If you want a more advanced animations then this is easily done using so-called CSS3 animations.

Adding the following CSS snippet to your site will shake or "wobble" the box after it becomes visible, much like the WordPress login screen shakes when you enter an invalid password.

Click here to see a demo.

.boxzilla {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-name: wobble;
}

@keyframes wobble {
  from {
    transform: none;
  }

  15% {
    transform: translate3d(-21%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    transform: translate3d(18%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    transform: translate3d(-12%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    transform: translate3d(6%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    transform: translate3d(-3%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    transform: none;
  }
}

If you don't know where to place this CSS snippet on your site, we recommend using the Simple Custom CSS plugin.

Was this article helpful? ·