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

9 thoughts on “Google Map Marker ID

  1. I think this is one of the most important information for me. And i’m glad reading your article. But wanna remark on some general things, The web site style is ideal, the articles is really nice : D. Good job, cheers

  2. Thanks for sharing nice Interview Question and answers.

    And it would be a great help if you share JavaScript,AngularJS and other frameworks Interview stuff too.

Leave a Reply

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