Rotating Sunburst Using CSS3 Keyframe Animations


CSS3 keyframe animations, or the combination of two components: a set of keyframes that indicate the start and end states of the animation’s style and the style describing the animation, create maintainable animations without requiring traditional script-driven animation techniques. With the proper use of CSS animation syntax, you’ll be able to create a smooth animation that don’t even need JavaScript or any tool.

If you want to learn more on how to animate objects, shapes and illustrations using CSS animations, check out the resource link we provided on our “further reading” section.

In this CSS animation tutorial, we will create a rotating sunburst using CSS3 keyframe animations only – without using JavaScript and any animation or HTML5 and CSS3 tools. We will animate the values of CSS properties over time, using keyframes so we can animate the sequence or rotate the sunburst continuously. You can use this tutorial as an experimentation and play with the interpolation with your own animation.

You might want to take a look at the following related articles:

Dont forget to subscribe to our RSS-feed and follow us on Twitter – for recent updates.

Microsoft PowerPoint Presentation Templates

Rotating Sunburst Using CSS3 Keyframe Animations

Rotating Sunburst Using CSS3 Keyframe Animations

Step 1: Preparing the Output in Mind

Before anything else, we must have an idea on our mind on what will be the output of our sunburst in terms of design. Remember, in terms of design and not in animation. In our case, I provided a sample sunburst graphic that we will recreate using CSS.

Rotating Sunburst Using CSS3 Keyframe Animations

Step 2: Creating the HTML Document

Let’s start our CSS animation tutorial by creating our HTML document consisting of the basic HTML structure.

<html>

<head>
<title>CSS3 Keyframe Animations</title>
<style>
<!-- Insert CSS Here -->
</style>
</head>

<body>
<!-- Insert Step 3 Here -->
</body>

</html>

Step 3: Default State and Environment

The next step is of course to provide or set the area of the environment covered by our animation. In this case, we will cover the whole screen with allowance using margins with negative values on all sides. We will also add a white background since the two colors on our sunburst are white and black. We will use the black color in the beams.

<div class="sunburst">
<div class="outer">
<!-- Insert Step 4 Here -->
</div>
</div>

Let’s add the CSS style on our newly added HTML elements.

.sunburst {
width: 1368px;
height: 680px;
margin:-11px -11px -11px -11px;
overflow: hidden;
background: white;
}

.sunburst .outer {
width: 2000px;
height: 910px;
padding-top: 1090px;
margin: -800px 0 0 -310px;
-webkit-animation-name: rotate1;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-name: rotate1;
-moz-animation-duration:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
}

Some of you is already familiar with the basic CSS syntax, values and elements but not with the CSS animation. So obviously, you will be wondering what are the uses of the “unknown-for-you” CSS properties. Let’s define it one by one.

  • animation-name – specifies a list of animations that should be applied to the selected element.
  • animation-duration – specifies the length of time that an animation should take to complete one cycle.
  • animation-iteration-count – Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.
  • animation-timing-function – specifies how a CSS animation should progress over the duration of each cycle.

Step 4: Adding the first beam

To add the rays or the beams, we will be using the <b> opening tag and </b> the closing tag together. Our HTML so far:

<div class="sunburst">
<div class="outer">
<b></b>
</div>
</div>

Let’s add the corresponding CSS properties to our newly added HTML tag. Since we already have a white background, we will use black as our border color – the color of our beams or rays.

.sunburst b {
display: block;
width: 0;
height: 0;
border-width: 90px 1000px;
margin: -180px 0 0 0;
border-color: transparent black;
border-style: solid;
}

Here’s what we have so far:

Rotating Sunburst Using CSS3 Keyframe Animations

Step 5: Completing the Sunburst

We only have one beam so far and to complete the sunburst, we will add more <b> opening tag and </b> the closing tag together. Our final HTML will consist of 10 <b></b> tags.

<div class="sunburst">
<div class="outer">
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
</div>
</div>

Obviously, these rays will be on the same position. So what we will going to do is to rotate each tag or ray using the CSS properties below:

.sunburst b:nth-child(1) {
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
}

.sunburst b:nth-child(2) {
-webkit-transform:rotate(40deg);
-moz-transform:rotate(40deg);
}

.sunburst b:nth-child(3) {
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
}

.sunburst b:nth-child(4) {
-webkit-transform:rotate(80deg);
-moz-transform:rotate(80deg);
}

.sunburst b:nth-child(5) {
-webkit-transform:rotate(100deg);
-moz-transform:rotate(100deg);
}

.sunburst b:nth-child(6) {
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
}

.sunburst b:nth-child(7) {
-webkit-transform:rotate(140deg);
-moz-transform:rotate(140deg);
}

.sunburst b:nth-child(8) {
-webkit-transform:rotate(160deg);
-moz-transform:rotate(160deg);
}

.sunburst b:nth-child(9) {
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
}

We have completed our sunburst background or graphic using only HTML and CSS.

Rotating Sunburst Using CSS3 Keyframe Animations

Step 6: Animating the Sunburst

To animate our sunburst, we will add the keyframes together with our CSS properties and elements.

@-webkit-keyframes rotate1 {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(20deg); }
}

@-moz-keyframes rotate1 {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(20deg); }
}

Basically, we get the animation name rotate1 from the previous step as it will be the element which will have the animation. Then, we set our keyframes of our rotation from 0deg to 20deg.
View Demo

Conclusion

With the creativity and proper knowledge on CSS animation especially its underlying concepts and syntax, one will be able to create a smooth, maintainable animation.

With this CSS animation tutorial, we didn’t use any CSS animation generator to make a rotating sunburst which is really great if you love a purely coded stuff. I hope you like this CSS animation example. Share the link of your animation  in the comment box.

Further Reading:

An Introduction To CSS3 Keyframe Animations: In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it. – SmashingMagazine

Using CSS Animations: In this article, you will learn the key advantages to CSS animations, how to configure the animation, how to define the animation sequence using keyframes and a lot of live examples. – Mozilla Developer Network

Keyframe Animation Syntax: If you want to learn the keyframe animation syntax, Christ Coyier posted a great resource of code snippet for you. – CSS-Tricks

Download CSS3 Keyframe Animations Code Snippet

If you want to experiment with the HTML and/or CSS code of this rotating sunburst using CSS3 keyframe animations, you can download the project file below.

Download Exclusive Freebie

You want this freebie? Like, Tweet or +1 to download the file.

A Collection of Christmas Resources and Inspirations
Authored by: Kim Murillo

Kim Murillo is the social media manager of Designrshub - a design blog that focuses on everything design related - and the one who maintains the gallery section. Occasionally, she posts HTML/CSS tutorials on various design blogs. You can use our contact form to inquire for a tutorial exclusively for your blog.