/* decent green colors for flash-up: 98FB98, 93C572 */

@-webkit-keyframes yellow-fade { from { background: #FBEC5D; } }
@-moz-keyframes yellow-fade    { from { background: #FBEC5D; } }
@keyframes yellow-fade         { from { background: #FBEC5D; } }

.fade-it {
  -webkit-animation: yellow-fade 1.0s ease-in-out 0s, shake 0.5s;
  -moz-animation: yellow-fade 1.0s ease-in-out 0s, shake 0.5s;
  -o-animation: yellow-fade 1.0s ease-in-out 0s, shake 0.5s;
  animation: yellow-fade 1.0s ease-in-out 0s, shake 0.5s;
}

/* Defining this animation twice is bloaty and hacky, but it works. */
@-webkit-keyframes yellow-fade2 { from { background: #FBEC5D; } }
@-moz-keyframes yellow-fade2    { from { background: #FBEC5D; } }
@keyframes yellow-fade2         { from { background: #FBEC5D; } }

.fade-it-alt {
  -webkit-animation: yellow-fade2 1.0s ease-in-out 0s, shake2 0.5s;
  -moz-animation: yellow-fade2 1.0s ease-in-out 0s, shake2 0.5s;
  -o-animation: yellow-fade2 1.0s ease-in-out 0s, shake2 0.5s;
  animation: yellow-fade2 1.0s ease-in-out 0s, shake2 0.5s;
}


/* red fading */

@-webkit-keyframes red-fade { from { background: #FF3131; } }
@-moz-keyframes red-fade    { from { background: #FF3131; } }
@keyframes red-fade         { from { background: #FF3131; } }

.red-fade-it {
  -webkit-animation: red-fade 1.0s ease-in-out 0s, shake 1.0s;
  -moz-animation: red-fade 1.0s ease-in-out 0s, shake 1.0s;
  -o-animation: red-fade 1.0s ease-in-out 0s, shake 1.0s;
  animation: red-fade 1.0s ease-in-out 0s, shake 1.0s;
}

/* Defining this animation twice is bloaty and hacky, but it works. */
@-webkit-keyframes red-fade2 { from { background: #FF3131; } }
@-moz-keyframes red-fade2    { from { background: #FF3131; } }
@keyframes red-fade2         { from { background: #FF3131; } }

.red-fade-it-alt {
  -webkit-animation: red-fade2 1.0s ease-in-out 0s, shake2 1.0s;
  -moz-animation: red-fade2 1.0s ease-in-out 0s, shake2 1.0s;
  -o-animation: red-fade2 1.0s ease-in-out 0s, shake2 1.0s;
  animation: red-fade2 1.0s ease-in-out 0s, shake2 1.0s;
}


/* blue fading */

@-webkit-keyframes blue-fade { from { background: #7DF9FF; } }
@-moz-keyframes blue-fade    { from { background: #7DF9FF; } }
@keyframes blue-fade         { from { background: #7DF9FF; } }

.fade-it-blue {
  -webkit-animation: blue-fade 1.0s ease-in-out 0s, shake 0.5s;
  -moz-animation: blue-fade 1.0s ease-in-out 0s, shake 0.5s;
  -o-animation: blue-fade 1.0s ease-in-out 0s, shake 0.5s;
  animation: blue-fade 1.0s ease-in-out 0s, shake 0.5s;
}

/* Defining this animation twice is bloaty and hacky, but it works. */
@-webkit-keyframes blue-fade2 { from { background: #7DF9FF; } }
@-moz-keyframes blue-fade2    { from { background: #7DF9FF; } }
@keyframes blue-fade2         { from { background: #7DF9FF; } }

.fade-it-blue-alt {
  -webkit-animation: blue-fade2 1.0s ease-in-out 0s, shake2 0.5s;
  -moz-animation: blue-fade2 1.0s ease-in-out 0s, shake2 0.5s;
  -o-animation: blue-fade2 1.0s ease-in-out 0s, shake2 0.5s;
  animation: blue-fade2 1.0s ease-in-out 0s, shake2 0.5s;
}

/* white fading */

@-webkit-keyframes white-fade { from { background: #ffffff; } }
@-moz-keyframes white-fade    { from { background: #ffffff; } }
@keyframes white-fade         { from { background: #ffffff; } }

.fade-it-white {
  -webkit-animation: white-fade 1.0s ease-in-out 0s, shake 0.5s;
  -moz-animation: white-fade 1.0s ease-in-out 0s, shake 0.5s;
  -o-animation: white-fade 1.0s ease-in-out 0s, shake 0.5s;
  animation: white-fade 1.0s ease-in-out 0s, shake 0.5s;
}

/* Defining this animation twice is bloaty and hacky, but it works. */
@-webkit-keyframes white-fade2 { from { background: #ffffff; } }
@-moz-keyframes white-fade2    { from { background: #ffffff; } }
@keyframes white-fade2         { from { background: #ffffff; } }

.fade-it-white-alt {
  -webkit-animation: white-fade2 1.0s ease-in-out 0s, shake2 0.5s;
  -moz-animation: white-fade2 1.0s ease-in-out 0s, shake2 0.5s;
  -o-animation: white-fade2 1.0s ease-in-out 0s, shake2 0.5s;
  animation: white-fade2 1.0s ease-in-out 0s, shake2 0.5s;
}

.jiggle {
  -webkit-animation: shake 0.5s;
  -moz-animation: shake 0.5s;
  -o-animation: shake 0.5s;
  animation: shake 0.5s;
}

.jiggle-alt {
  -webkit-animation: shake2 0.5s;
  -moz-animation: shake2 0.5s;
  -o-animation: shake2 0.5s;
  animation: shake2 0.5s;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes shake2 {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}


.zoom-it {
  animation: zoom-in-zoom-out 1s ease;
}

.zoom-it-alt {
  animation: zoom-in-zoom-out2 1s ease;
}

@keyframes zoom-in-zoom-out {
  0% { scale: 100%; }
  50% { scale: 110%; }
  100% { scale: 100%; }
}

@keyframes zoom-in-zoom-out2 {
  0% { scale: 100%; }
  50% { scale: 110%; }
  100% { scale: 100%; }
}