CSS Animation: Curve Arrows

0
votes

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.

2
css
You may rotate the outer container as you stated and rotate the texts into the other direction on the same speed. But it will be a little bit sluggish. – wintercounter

2 Answers

2
votes

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>
1
votes

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); } }