Twine v1 Screen Shake Effect

shakeit.css

@keyframes shakeit {
  0% { transform: translate(2px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(0px, 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(2px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(2px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}
 
@-o-keyframes shakeit {
	0% { -o-transform: translate(2px, 1px) rotate(0deg); }
	10% { -o-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -o-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -o-transform: translate(0px, 2px) rotate(0deg); }
	40% { -o-transform: translate(1px, -1px) rotate(1deg); }
	50% { -o-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -o-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -o-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -o-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -o-transform: translate(2px, 2px) rotate(0deg); }
	100% { -o-transform: translate(1px, -2px) rotate(-1deg); }
}
 
@-webkit-keyframes shakeit {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
 
@-moz-keyframes shakeit {
	0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
	10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
	40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
	50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
	100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
 
.shake {
	-webkit-animation-name: shakeit;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
  -moz-animation-name: shakeit;
	-moz-animation-duration: 0.8s;
	-moz-transform-origin:50% 50%;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
  -o-animation-name: shakeit;
	-o-animation-duration: 0.8s;
	-o-transform-origin:50% 50%;
	-o-animation-iteration-count: infinite;
	-o-animation-timing-function: linear;
  animation-name: shakeit;
	animation-duration: 0.8s;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.shake {
	/*display:inline-block*/
}

Start passage

<<screenShake 1400>>
"EARTHQUAKE!!!" You yell. No one answers. The shaking seems to have stopped.
/* The number 1400 is the amount of time (in milliseconds) that the screen will shake */