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.

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

One thought on “Object rotating clockwise with CSS3 Animations

Leave a Reply

Your email address will not be published. Required fields are marked *