We are closed from monday July 16th till monday August 6 2012

Watch the animation

Making a masked animation with CSS3

A short tutorial on making a css3 animation with 2 images and masking technique

Step 1: preparing the 2 images i used in this animation

For this quick tutorial, i made 2 images: the background color circle and the sun shape that i exported as transparent png. Because the front image of the sun will be on top of the background image of the color circle, you have to decide the color of the background so that the sun front color is the same as the one you use as your body or section color. In this case, the color is blue with hexadecimal value of #46c6d4 or RGB value of 70,198,212.

_{download the 2 images}

Step 2: coding the background and images

The background of the html document is set to a repeating pattern. Because the body is set to blue, the margin of the body is set to 20 pixels so that you still can see a bit of the background pattern used.

_{download the background pattern image}

The code

	
html{
	margin:20px;
	background: url(../images/pattern-01.jpg) repeat
}
body{
	background:rgb(70,198,212);
	background:#46c6d4;
	font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 14px;
	line-height: 1;
	color: #222;
	position: relative;
	-webkit-font-smoothing: antialiased
	}
	

Step 3: coding the html to hold the images

Everything on the image side is defined now, so we can code the containers that will hold the images before coding the animation

I have set 2 containers set in my html code, the first that holds the color circle image has an id of circle and the second that holds the image of the sun mask has a class name masked. The sun mask is within the circle div. I put in a block-level element h2 (can be any other block-level element) to set the background-image of the sun and centered it.

The html

<div id="circle">
	<div class="masked">
		<h2></h2>
	</div>
</div>

The css

	
#circle {
	position: relative;
	margin: 0 auto;
	background: url(../images/circle.png) no-repeat center center;
}

.masked h2{
	text-indent:-9999px;
	margin: 0 auto;
	height: 500px;
	background: url(../images/Sun.png) no-repeat center center;
	}	

Step 4: animating the sun

We start the animation by declaring the animation keyframes from 0 to 360 degrees for a full circle rotation (read more about the syntax on CSS-tricks ) and giving it a name, here it is called masked-animation. Above the general declaration, we put the CSS3 vendor prefix for browser compatibility.

The css

	
@-webkit-keyframes masked-animation {
	from{	-webkit-transform:rotate(0deg) }
	to {	-webkit-transform:rotate(360deg)}
}
@-moz-keyframes masked-animation {
	from{	-moz-transform:rotate(0deg) }
	to {	-moz-transform:rotate(360deg)}
}
@-ms-keyframes masked-animation {
	from{	-ms-transform:rotate(0deg) }
	to {	-ms-transform:rotate(360deg)}
}
@-o-keyframes masked-animation {
	from{	-o-transform:rotate(0deg) }
	to {	-o-transform:rotate(360deg)}
}
@keyframes masked-animation {
	from{	transform:rotate(0deg) }
	to {	transform:rotate(360deg)}
}

Step 5: calling the animation and setting the properties

Last step before the animation will actually start: the mask class to which the animation is referrering, the sun image has to contain the name of the animation definition. Set the name, the duration in seconds for the rotation movement, the iteration and the timing function. Test it and you'll see the animation in action!

.masked{
	-webkit-animation-name: masked-animation;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: masked-animation;
	-moz-animation-duration: 10s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: masked-animation;
	-ms-animation-duration: 10s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;
	-o-animation-name: masked-animation;
	-o-animation-duration: 10s;
	-o-animation-iteration-count: infinite;
	-o-animation-timing-function: linear;
	animation-name: masked-animation;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	}

Browser support

Firefox 5+, IE 10+, Chrome, Safari, see also Mozilla Docs

Step 6: quote with webfonts

For the quote by Bob Marley, i used the free Google webfonts service.

These are the fonts i used:

• Open Sans Condensed
• Alegreya SC
• Dancing Script
• Corben

Hope you enjoyed this little tutorial, if you have ideas or suggestions to improve, don't hesitate to contact me! Have a great summer vacation!