/*
 * 1. THE NEW CSS CLASS TO USE
 * Apply this class to your HTML element instead of "shake-top".
 * It calls our new animation which runs for 7 seconds and loops forever.
*/
.shake-on-interval {
	-webkit-animation: shake-top-and-pause 7s infinite both;
	        animation: shake-top-and-pause 7s infinite both;
}


/*
 * 2. THE NEW @KEYFRAMES RULE
 * This rule "squishes" the original 0.8-second shake into the beginning
 * of a 7-second timeline, leaving the rest of the time as a pause.
*/

/* For -webkit- browsers */
 @keyframes shake-top-and-pause {
  /* The shake action lasts 0.8s. 0.8s is ~11.4% of 7s.
     We'll perform the entire original animation within the first 12% of the timeline.
  */
  0%, 12% {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
  }
  1.2% { /* Original 10% scaled down */
    -webkit-transform: rotate(2deg);
  }
  2.4%, 4.8%, 7.2% { /* Original 20%, 40%, 60% */
    -webkit-transform: rotate(-4deg);
  }
  3.6%, 6.0%, 8.4% { /* Original 30%, 50%, 70% */
    -webkit-transform: rotate(4deg);
  }
  9.6% { /* Original 80% */
    -webkit-transform: rotate(-2deg);
  }
  10.8% { /* Original 90% */
    -webkit-transform: rotate(2deg);
  }
  /* From 12% to 100% is the 6.2-second pause where the element is still */
}

/* For standard browsers */
@-webkit-keyframes shake-top-and-pause {
  /* The shake action lasts 0.8s. 0.8s is ~11.4% of 7s.
     We'll perform the entire original animation within the first 12% of the timeline.
  */
  0%, 12% {
    transform: rotate(0deg);
    transform-origin: 50% 0;
  }
  1.2% { /* Original 10% scaled down */
    transform: rotate(2deg);
  }
  2.4%, 4.8%, 7.2% { /* Original 20%, 40%, 60% */
    transform: rotate(-4deg);
  }
  3.6%, 6.0%, 8.4% { /* Original 30%, 50%, 70% */
    transform: rotate(4deg);
  }
  9.6% { /* Original 80% */
    transform: rotate(-2deg);
  }
  10.8% { /* Original 90% */
    transform: rotate(2deg);
  }
  /* From 12% to 100% is the 6.2-second pause where the element is still */
}