Summer holidays are here!

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.

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.

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.

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.

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!