Full-page Animation - Part 3

Full-page-Animation---Part-3.markdown

Full-page Animation - Part 3

A Pen by Treehouse on CodePen.

License.

index.html

	<div class="boat">
		<img src="http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/boat.png" alt="tugboat">
	</div>
	<img class="mike" src="http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-12/mike.png">

style.css

/*	Animations
------------------------------------------ */

body {
	-webkit-animation: bg-move 8s ease-out forwards;
}
.boat {
	-webkit-animation: rock-boat 3s ease-in-out infinite;
}
.boat::after {
	-webkit-animation: steam 4s 2s infinite;
}
.mike {
	-webkit-animation: mike-move 6s 6s ease-out forwards,
	                   mike-float 3.2s infinite;
}


/*	Keyframes - WebKit only
------------------------------------------ */

@-webkit-keyframes rock-boat {
	50%  { -webkit-transform: rotate(-5deg) translateY(-10px); }
}

@-webkit-keyframes steam {
	40%,
	60%  { opacity: .8; }
	100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}

@-webkit-keyframes bg-move {
	0%   { background-position:  100% -560px; }
	100% { background-position: -350% -460px; }
}

@-webkit-keyframes mike-move {
	100% { left: 12%; }
}

@-webkit-keyframes mike-float {
	50% { -webkit-transform: rotateZ(5deg) translateY(-5px); }
}