CODEWITHSUNDEEP
css
Tibs
Tibs

Reputation: 765

CSS Animation: Curve Arrows

Is it possible to circularly animated this image? enter image description here

I attempted to animate it by creating a relative parent and setting each image (business solutions div, it solutions div, lifecycle solutions div and education solutions div to absolute). I used this code, @keyframes rotate { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } and it rotated in different behavior. They rotated on their own place.

I want to animate it in such a way that: the 4 services will circularly move. Except the outer and inner texts. Thank you in advance.

Upvotes: 0

Views: 957

Answers (2)

Paul
Paul

Reputation: 185

You will need at least two elements. The static one must have have transparent areas so that it can sit over or behind the rotating div.

To rotate the div:

div.your-rotating-element {
    animation-name: rotate-div;
    /*enter other styles*/
    animation:spin 4s linear infinite;
    }

@-moz-keyframes rotate-div { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); } }
@keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 114979

Here's a quick demo of the general pricipal.

.box {
  width: 200px;
  height: 200px;
  margin: 5em auto;
  border: 1px solid grey;
  position: relative;
  -webkit-animation: spin 10s infinite linear;
  animation: spin 10s infinite linear;
}
.object {
  position: absolute;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: plum;
  top: 25px;
  left: 25px;
  -webkit-animation: spin 10s infinite reverse linear;
  animation: spin 10s infinite reverse linear;
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
<div class="box">
  <div class="object">Text</div>
</div>

Upvotes: 2

Related Questions