gistfile1.css

/* shake css animation */
.grain-animated{
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:.3s;
-moz-animation-duration:0.2s;
-ms-animation-duration:1.5s;
-o-animation-duration:1.5s;
animation-duration:1s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out
}
.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}


@-webkit-keyframes shake-left {
  0% { -webkit-transform:rotate(0deg);top:0px; }
  50% { -webkit-transform:rotate(-20deg);top: 4px; }
  100% { -webkit-transform:rotate(0deg); top: 0px; }
}

@-moz-keyframes shake-left {
  0% { -webkit-transform:rotate(0deg);top:0px; }
  50% { -webkit-transform:rotate(-20deg);top: 4px; }
  100% { -webkit-transform:rotate(0deg); top: 0px; }
}
@-o-keyframes shake-left {
  0% { -webkit-transform:rotate(0deg);top:0px; }
  50% { -webkit-transform:rotate(-20deg);top: 4px; }
  100% { -webkit-transform:rotate(0deg); top: 0px; }
}
@keyframes shake-left {
  0% { -webkit-transform:rotate(0deg);top:0px; }
  50% { -webkit-transform:rotate(-20deg);top: 4px; }
  100% { -webkit-transform:rotate(0deg); top: 0px; }
}

@-webkit-keyframes shake-right {
  0% { -webkit-transform:rotate(0deg);top:0px; }
  50% { -webkit-transform:rotate(20deg);top: 4px; }
  100% { -webkit-transform:rotate(0deg); top: 0px; }
}
@-moz-keyframes shake-right {
  0% { -webkit-transform:rotate(0deg);top:0px; }
  50% { -webkit-transform:rotate(20deg);top: 4px; }
  100% { -webkit-transform:rotate(0deg); top: 0px; }
}
@-o-keyframes shake-right {
  0% { -webkit-transform:rotate(0deg);top:0px; }
  50% { -webkit-transform:rotate(20deg);top: 4px; }
  100% { -webkit-transform:rotate(0deg); top: 0px; }
}
@keyframes shake-right {
  0% { -webkit-transform:rotate(0deg);top:0px; }
  50% { -webkit-transform:rotate(20deg);top: 4px; }
  100% { -webkit-transform:rotate(0deg); top: 0px; }
}

@-webkit-keyframes shake-top {
  0% { -webkit-transform:rotate(45deg);left:0px; }
  33% { -webkit-transform:rotate(55deg);left:3px; }
  66% { -webkit-transform:rotate(35deg);left:-3px; }
  100% { -webkit-transform:rotate(45deg);left:0px; }
}
@-moz-keyframes shake-top {
  0% { -webkit-transform:rotate(45deg);left:0px; }
  33% { -webkit-transform:rotate(55deg);left:3px; }
  66% { -webkit-transform:rotate(35deg);left:-3px; }
  100% { -webkit-transform:rotate(45deg);left:0px; }
}
@-o-keyframes shake-top {
  0% { -webkit-transform:rotate(45deg);left:0px; }
  33% { -webkit-transform:rotate(55deg);left:3px; }
  66% { -webkit-transform:rotate(35deg);left:-3px; }
  100% { -webkit-transform:rotate(45deg);left:0px; }
}
@keyframes shake-top {
  0% { -webkit-transform:rotate(45deg);left:0px; }
  33% { -webkit-transform:rotate(55deg);left:3px; }
  66% { -webkit-transform:rotate(35deg);left:-3px; }
  100% { -webkit-transform:rotate(45deg);left:0px; }
}

.grain-left.shake {
  -webkit-animation-name: shake-left;
	-moz-animation-name: shake-left;
	-o-animation-name: shake-left;
	animation-name: shake-left;
}
.grain-right.shake {
	-webkit-animation-name: shake-right;
	-moz-animation-name: shake-right;
	-o-animation-name: shake-right;
	animation-name: shake-right;
}
.grain-top.shake {
	-webkit-animation-name: shake-top;
	-moz-animation-name: shake-top;
	-o-animation-name: shake-top;
	animation-name: shake-top;
}