Realistic Hinge CSS3 Animation

#logo {
	z-index:1000;
	-webkit-transform: translateZ(0);
	visibility:visible; 
	-webkit-transform: rotate(-15deg); 
	-moz-transform: rotate(-15deg); 
	-o-transform: rotate(-15deg); 
	transform: rotate(-15deg);
	-webkit-transform-origin: top right;
	-moz-transform-origin: top right;
	-o-transform-origin: top right;
	transform-origin: top right;
	-webkit-animation:hingeLogo 2.5s;
	-moz-animation:hingeLogo 2.5s;
	-ms-animation:hingeLogo 2.5s;
	-o-animation:hingeLogo 2.5s;
	animation:hingeLogo 2.5s;
}
@-webkit-keyframes hingeLogo {
	0% { -webkit-transform: rotate(0); -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in; }
	40% { -webkit-transform: rotate(-15deg); -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in-out; }
	60% { -webkit-transform: rotate(-12deg); -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in; }
	80% { -webkit-transform: rotate(-15deg); -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in-out; }
	95% { -webkit-transform: rotate(-14deg); -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in; }		
	100% { -webkit-transform: rotate(-15deg); -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in-out; }
}
@-moz-keyframes hingeLogo {
	0% { -webkit-transform: rotate(0); -moz-transform-origin: top right; -moz-animation-timing-function: ease-in; }
	40% { -webkit-transform: rotate(-15deg); -moz-transform-origin: top right; -moz-animation-timing-function: ease-in-out; }
	60% { -webkit-transform: rotate(-12deg); -moz-transform-origin: top right; -moz-animation-timing-function: ease-in; }
	80% { -webkit-transform: rotate(-15deg); -moz-transform-origin: top right; -moz-animation-timing-function: ease-in-out; }
	95% { -webkit-transform: rotate(-14deg); -moz-transform-origin: top right; -moz-animation-timing-function: ease-in; }		
	100% { -webkit-transform: rotate(-15deg); -moz-transform-origin: top right; -moz-animation-timing-function: ease-in-out; }
}
@-o-keyframes hingeLogo {
	0% { -webkit-transform: rotate(0); -o-transform-origin: top right; -o-animation-timing-function: ease-in; }
	40% { -webkit-transform: rotate(-15deg); -o-transform-origin: top right; -o-animation-timing-function: ease-in-out; }
	60% { -webkit-transform: rotate(-12deg); -o-transform-origin: top right; -o-animation-timing-function: ease-in; }
	80% { -webkit-transform: rotate(-15deg); -o-transform-origin: top right; -o-animation-timing-function: ease-in-out; }
	95% { -webkit-transform: rotate(-14deg); -o-transform-origin: top right; -o-animation-timing-function: ease-in; }		
	100% { -webkit-transform: rotate(-15deg); -o-transform-origin: top right; -o-animation-timing-function: ease-in-out; }
}
@keyframes hingeLogo {
	0% { -webkit-transform: rotate(0); transform-origin: top right; animation-timing-function: ease-in; }
	40% { -webkit-transform: rotate(-15deg); transform-origin: top right; animation-timing-function: ease-in-out; }
	60% { -webkit-transform: rotate(-12deg); transform-origin: top right; animation-timing-function: ease-in; }
	80% { -webkit-transform: rotate(-15deg); transform-origin: top right; animation-timing-function: ease-in-out; }
	95% { -webkit-transform: rotate(-14deg); transform-origin: top right; animation-timing-function: ease-in; }		
	100% { -webkit-transform: rotate(-15deg); transform-origin: top right; animation-timing-function: ease-in-out; }
}

 

Dave Winter focuses in WordPress UI Design and WordPress Plugin Development (some have labelled him a fanatic) but has hands in many other projects, including photography and music. He's never far from a computer... or an iPad (for testing purposes, of course). If you've been to a WordCamp in Southern California, he probably already knows who you are (or maybe not - he's terrible with names). Dave currently teaches courses at California State University, Long Beach alongside his small business at dauid.us (and his students think he's pretty boss).
© 2008-2020, dauid.us