Look Inside
Howdy all! Recently I’ve get interested in CSS3 transitions and animation since my last post which discussed about Pure CSS3 drawing. Today I would like to share with you some of my experimental CSS3 animations – pure CSS3 Background Animations. Yup, you’re right! Pure means this was totally done by the magic of CSS3, no JavaScript and images are used.
The idea was inspired from Starry night CSS3 Paterns and CSS3 Parallax Background of Stars. So, one thing comes to my mind: “Could they both be combined?”, and here is the result! Well, it is a bit abuses the CSS3, that’s why it looks lagging. LOL. Anyway, I have converted it into snow fall as well. Enjoy!
[browser type=”cfs-x”]Please take note that this is CSS3 showcase, it only works well in Webkit browsers like Chrome and Safari (working in Firefox also, but will laggy…).[/browser]
Draw Star Effect with CSS3
Before we get started with CSS3 keyframe animation, we have to draw the ‘star’ without using any images. The ‘star‘ can be very easy to be created using CSS3 Gradients attribute. In our case we will use Radial Gradients to draw a ‘star’. You might use CSS3 generator tools also.
body {
background-color: black;
/* Webkit */
background-image: -webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent) );
/* Firefox */
background-image: -moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px);
}
If you paste the code above to your text editor and run it, you’ll see the result is same as the image shown below. You could change the ‘star’s color and size by altering the value. You could take a visit to CSS: Radial gradients syntax for more detail about CSS3 radial-gradient attribute.
CSS Background with Star
The next step is to fill this ‘star’ into our background. This is the most complicated part in this demo. You have to positioning the ‘stars’ with different values. If you set the suitable values, your results will looks awesome, and vice versa. This time we will use new CSS3 background attribute to handle it.
body {
background-color: black;
/* Webkit */
background-image:
-webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(white), color-stop(0.1, rgba(255,186,170,.4)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 40, from(rgba(255,255,255,.9)), color-stop(0.05, rgba(251,255,186,.3)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30, from(rgba(255,255,255,.4)), color-stop(0.03, rgba(253,255,219,.2)), to(transparent));
/* Firefox */
background-image:
-moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px),
-moz-radial-gradient(circle, #FFFFFF 1px, rgba(255,186,170,.4) 3px, transparent 30px),
-moz-radial-gradient(circle, rgba(255,255,255,.9) 1px, rgba(251,255,186,.3) 2px, transparent 40px),
-moz-radial-gradient(circle, rgba(255,255,255,.4), rgba(253,255,219,.2) 1px, transparent 30px);
/* Background images size */
background-size: 550px 550px, 350px 350px, 250px 270px, 220px 200px;
/* Background images position*/
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
How it works? The idea was actually same as a repeating background-image. A background-image is repeating itself all over the background if no-repeat attribute is not stated. In our case we use four repeating background-images with different sizes and positions, so that each background-image will repeated differently. You could include more background-images as you wish, but these will load heavier in user’s PC if we animate them.
Now, you should able to see a pure CSS3 starry night background in your page.
Create CSS3 Background Animations
It is time for CSS3 background animations. This part shouldn’t be difficult to you if you know CSS3 animation attribute. Define your CSS3 animation attributes and pointing it to a keyframe animation, which will animate the background position for different background-images.
body {
background-color: black;
/* Firefox */
background-image:
-moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px),
-moz-radial-gradient(circle, #FFFFFF 1px, rgba(255,186,170,.4) 3px, transparent 30px),
-moz-radial-gradient(ellipse, rgba(255,255,255,.9) 1px, rgba(251,255,186,.3) 2px, transparent 40px),
-moz-radial-gradient(ellipse, rgba(255,255,255,.4), rgba(253,255,219,.2) 1px, transparent 30px);
/* Webkit */
background-image:
-webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(white), color-stop(0.1, rgba(255,186,170,.4)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 40, from(rgba(255,255,255,.9)), color-stop(0.05, rgba(251,255,186,.3)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30, from(rgba(255,255,255,.4)), color-stop(0.03, rgba(253,255,219,.2)), to(transparent));
/* Background Attributes */
background-size: 550px 550px, 350px 350px, 250px 270px, 220px 200px;
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
/* Animation */
animation-name: movement;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
/* Firefox */
-moz-animation-name: movement;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
/* Webkit */
-webkit-animation-name: movement;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
@-moz-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
@-webkit-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
Final Thoughts
As you can see, the demo seems to be laggy, but the overall effect looks awesome. Whatever it is, if you are a CSS expert, please share your thoughts with us regarding this. For others, you’re also welcome to comment about your opinion.