News

Use CSS3 to create rotating animations

Combine transparent PNGs with CSS3 to emulate the rotating effects found on the Tomas Bata University site

CSS3Animation

Combine transparent PNGs with CSS3 to emulate the rotating effects found on the Tomas Bata University site

CSS3Animation


Get the code to help complete this tutorial


Rotating planets loop

Central to the Tomas Bata University in Zlín microsite is the rotating planet-like element in the page centre. Closer inspection reveals this to be a stack of transparent PNG images, with several rotating. By applying this subtle looping motion to the planet and stars, using CSS3 animations, a simple but effective result is achieved. Here we’ll mimic this technique to suggest how it’s done!

Prepare the planet

To start with we want to prepare our stack of images. Keeping things simple we’ll use just two, the first being a simple circular planet created in Photoshop. This is sized 120 by 120 pixels with a transparent background and saved as a PNG called ‘planet.png’. Give it enough distinct detail so that the motion that is given to it later becomes obvious.

Give it a ring

A second image is sized 360 by 360 pixels, again with a transparent background. Here we’ve simply added an outer ring with an additional planet and then a series of white dots randomly scattered across to signify stars. This PNG is saved as ‘ring.png’, and along with planet.png, should be placed into the root of a new HTML document.

Add the elements

In our HTML page we just need three elements defined. Basically we insert our two images, nested inside a <div> called container. This will be used to centre the stack, so in our CSS we set positioning for container and set the background of our page body to the desired shade of grey:

001 CSS:
002 body {
003 background: #1A181D;
004
005 }
006
007
008 #container {
009
010 position: relative;
011 width: 360px;
012 margin: 15% auto;
013 }
014
015 HTML:
016 <body>
017 <div id=”container”>
018 <img class=”ring” src=”ring.png”>
019 <img class=”planet” src=”planet.    png”>
020
021 </div>
022 </body>
023 </html>

Position the planet

Our images are different sizes and, by default, appear next to each other on the page. In our planet image CSS class we must first position it as absolute so its position is keyed off of the <div> container. Because this parent element has positioning set as relative as opposed to the default static, we can set top and left values from its edges. The two now overlay:

001 .planet {
002    position: absolute;
003    top: 120px;
004    left: 120px;
005 }

Add the animations

Next we will add some animation properties to our image CSS classes. Here you can see the long and short hand methods for attaching a keyframes class called ‘orbit’ that we will be defining later on in the last step. The duration value is most critical here for staggering the two rotations, while linear timing keeps the motion constant and ‘infinite’ loops the animation. By adding a reverse to the ring image animation it will rotate anticlockwise:

001.planet {
002…
003/* Vendor prefixes shown in full     code */
004    animation-duration: 7s;
005    animation-timing-function:      linear;
006    animation-iteration-count:      infinite;
007    
008    animation-name: orbit;        009
010}
011.ring {
012 animation: orbit 20s linear        infinite reverse; 
013}

Apply the transform

We then need just a single @keyframes class called ‘orbit’ added to our CSS, attaching a full rotate transform for 100% of the cycle. You could also reverse this rotation by making this 360 degrees, or attach new behaviours to vary the effect. Play with the ‘animation-duration’ values to change timing, save and preview!

001 /* Vendor prefixes shown in full         code */
002 @keyframes orbit {
003 100% { transform:                    rotate(360deg); }
004}
×