As it’s St. Patrick’s Day I thought I would write a little bit of CSS3 and include it in the header of my blog to simulate a drunken viewing experience. If things are looking a little shaky then it’s either that, or the fact that you’ve had too much to drink already. Either way, if you wish to create a similar effect on your website simple add the following CSS to your stylesheet:

body {
	-webkit-animation-name: drunkenState;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes drunkenState {
	from {
		-moz-transform:rotate(0deg); 
		-webkit-transform:rotate(0deg); 
		-o-transform:rotate(0deg); 
		transform:rotate(0deg);
	}
	33% {
		-moz-transform:rotate(0.1deg); 
		-webkit-transform:rotate(0.1deg); 
		-o-transform:rotate(0.1deg); 
		transform:rotate(0.1deg);
	}
	66% {
		-moz-transform:rotate(-0.15deg); 
		-webkit-transform:rotate(-0.15deg);
		-o-transform:rotate(-0.15deg); 
		transform:rotate(-0.15deg);
	}
	to {
		-moz-transform:rotate(0deg); 
		-webkit-transform:rotate(0deg); 
		-o-transform:rotate(0deg); 
		transform:rotate(0deg);
	}
}

If you have any problems, suggestions or improvements please leave a comment.