Advanced CSS3: Animations
Along with transition, animation was one of the additions to CSS level 3. This allows the user to add animations without the need of using JavaScript. With CSS’ simple and easy coding language, it makes it easy for anyone to make simple animations and work their way up. Many games were created using CSS animation.
I will start by showing a simple animation example and how to make a basic object or picture move. I will also show how to animate a sprite sheet.
Basics Of Animations:
Before I start the demo, I will go over a few important things to know about animations. I will also go over what a sprite sheet is since it will be part of my animation demo.
First thing to know is: Animation use the “@keyframes” rule to set the animation. Without it, the animation will not be recognized and it won’t start. Once you have declared what you want to be animated and have given the animation a name, the @keyframes rule will call the animation name and you will decide what animation you want it to do.
Second: Sprite sheets is a combination of images put into a single image that can be used to create animation. Knowing the height and width of the sprite sheet you will be using is really important as it will help is displaying each frame individually. The width will need to be divided by the number of pictures the sprite sheet contains and height remains the same if your image is horizontal and the other way around if your image is vertical.
Third: Make sure to add the browser prefixes to make you animations compatible for all browsers. Some animations do not work on certain browser unless the appropriate prefix is added to the animation. My first blog contains what the prefixes are and how they are used.
Lets begin with a basic demo!
In NetBeans IDE 8.2 I have created a project called ‘sun’ and added a <div> tag with class=’sun’ inside it. You have two options here, you can either use a picture of a sun and animate the image or you can use CSS to create your own sun. For this example I will show you how using the options CSS gives us.
.sun {
width: 100px;
height: 100px;
border-radius:50%;
opacity:0.9;
box-shadow: 0px 0px 40px 15px white;
position:relative;left:480px;top:-20px;
-webkit-animation: slide 13s linear infinite;
}
The first two lines of code will set the height and width of the sun, since this makes a square, we will have to add a border radius to round the edges. Setting the opacity is optional, you can do so if you desire to make the element a little transparent. I have added 0.9 for the opacity, this will help make the sun look a little more realistic. The box-shadow property will add shadow to create ray like effect around the sun. The first two values of the box-shadow are the vertical and horizontal offset of shadow. The third value is for the blur radius and the last value is for the spread distance of your shadow. There are a few ways CSS allows you to position your animation, the one I found to work best when there are more then one element in your project is the position with the left and top option. This property helps you position your element really precisely. And the last line is setting the animation; adding the name of the animation, how long you want the animation to take and how many times you want the animation to loop. Adding ‘linear’ and ‘infinite’ is not mandatory if you want the animation to loop through once only but you do have to add a name for your animation and the animation length.
@-webkit-keyframes slide{
0% {
transform: translateY(650px);
background: #f00;
}
33% {
transform: translateY(50px);
background: #ffd630;
}
66% {
transform: translateY(-150px);
background: #ffd630;
}
100% {
transform: translateY(-400px);
background: #f00;
}
}
Now we have a sun that has proper height, width,border radius and box shadow, but we need to make it move. This is where the ’@keyframes’ rule comes and we will need to add the animation name which in our case would be “slide” because that is what we named it. Since I want my sun to transition colors as it goes up I will be dividing it into four sections and individually assigning them with a color and the direction I want it to go.
The transform property will be used to translate the sun on the y-axis. Depending on where you want your sun to start out, enter the position value. I want my sun to start off from the bottom (positive value) and rise to the top (negative value).
Sprite sheet demo
Animating sprite sheets can be a little more complicated then other animations, but once you get familiar with the concept it’s not as hard. There is a lot that can be done with sprite sheets in CSS.
I have googled a few sprite sheet images and will be using this one to demo how we can make this image move.
.bird {
animation: fly 1s steps(8) infinite;
background: url(image/bird1.png);
width: 88px;
height: 76px;
position: absolute;
top: 1px;
left: 50%;
}
@keyframes fly {
0% {background-position: 0; }
100% {background-position: -791px; }
}
In the code above, I have called the element ‘bird’. The first thing we will need to do is give the animation a name, I will call it ‘fly’. The height of the image is 76 and it will remain the same. The width is 704, we will need to divide the width with the number of frames the image contains, which in our case would be 8. This gives me 88 for the width. Then you can position where you want you element to be. To finish the animation code, we will need to add the @keyframes rule and set the animation for it to works.
There you have it, two simple animation examples. I hope this post will help you understand how animations work a little better.