Object rotating clockwise with CSS3 Animations

Can we create ‘Object rotating clockwise with CSS3 Animations’? Here is another example for CSS 3 animations and css3 transitions. I am going to give an example of CSS 3 animations using an arrow and a circle; Object rotating clockwise with CSS3 Animations.

In this example for Object rotating clockwise with CSS3 Animations, I use @keyframe – it involves the description of specific moments of animation with the @keyframe rule. This allows you to have repeating animations that do not depend on user actions or JavaScript to get triggered.

HTML for Object rotating clockwise with CSS3 Animations

    <div class="container-round">
        <div class="round"></div>
       <div class="arrow"></div>
    </div>

Here is a container which holds the circle and the arrow which will be rotating.

CSS for Object rotating clockwise with CSS3 Animations

   .container-round {
	width: 400px;
	height: 400px;
	margin: 0 auto;
	position:relative;
	overflow:hidden;
}

.round {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(round.png) no-repeat center center;
}

.arrow{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: url(arrow.png) no-repeat 50px center;
	-webkit-animation:orbit 2s linear infinite;
	animation:orbit 2s linear infinite;
	transition:background-position 0.8s;
}

/* Here I am defining 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);
	}
}

Give a name for the animation. Here I am using the name ‘orbit’ for the animation. And adding key frames for animation ‘orbit’.

Demo for Object rotating clockwise with CSS3 Animations