CSS3 animations allows animation of most HTML elements without using JavaScript or Flash.



Objectives and outcomes

Now in this tutorial we learn about how rotation animation effect is implemented in CSS3. By the end of this tutorial we will be able to use CSS animation, -webkit-keyframe and also to implement -webkit-keyframe queries.



The above shown image is the example of rotation transition which we are going to learn in this tutorial. Here we have used two circular images to show rotation effect one is the yellow circle and the other is small black circle.However when we hover near the yellow circle we can see that the black circle moves towards the yellow circle, this is because we have also used hover property in CSS.
The HTML and CSS code for the above example is shown below :



CSS Stylesheet:


<style>
	.container1
	{
		width: 300px;
		height:300px;
		margin: 0 auto;
		position:relative;
	}

	.yellowCir
	{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:url(img/sun.jpg) no-repeat center center;
	}

	.blackCir
	{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:url(img/blackp.jpg) no-repeat 50px center;

		/* Webkit still requires the -webkit- prefix */
		-webkit-animation:orbit 2s linear infinite;
		animation:orbit 2s linear infinite;

		transition:background-position 0.8s;
	}

	.container1:hover .blackCir
	{
		background-position:80px center;
	}

	/* Define the keyframes of the animation */

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

		@keyframes orbit {
		from {
				transform:rotate(0deg);

				-webkit-transform:rotate(0deg);}
		to {
				transform:rotate(360deg);
				-webkit-transform:rotate(360deg);
			}
		}
		</style>





HTML code:

<div class="container1">
	  <div class="yellowCir"></div>
   	  <div class="blackCir"></div>
      </div>


Explanation of the code :

-webkit- is used to support animation for different browsers and animation is CSS3 property which has many attributes but we are going to explain only those which we have used in our example. orbit used in the stylesheet is used for declaring the animation-name same as we declare variables. 2s used is the value of animation delay property which specifies a delay for the start of an animation. linear specifies that the speed of animation will remain same from start to end and the last infinite specifies the running time of animation.
keyframe hold what styles the element will have at certain times. When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. In the example above we have specified when the style will change by using the keywords from and to (which represents 0% (start) and 100% (complete)). It is also possible to use percent. By using percent, we can add as many style changes as we like.

Note: If the animation-duration property is not specified, the animation will have no effect, because the default value is 0.