2

Fiddle: https://jsfiddle.net/t11738dm/

HTML:

<div class="ball-5"></div>

How can I rotate 360 degree, only the border colors of the div?

I tried the following but that rotates the entire div which I don't want:

.ball-5 {
    -webkit-animation-name: Rotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: Rotate;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: Rotate;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

@-webkit-keyframes Rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes Rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-ms-keyframes Rotate {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

I would like to have the colors race around the div not the div nor the content of the div to go in circle.

Si8
  • 9,141
  • 22
  • 109
  • 221
  • Use a pseudo instead, and rotate that – Asons Apr 24 '17 at 13:43
  • 2
    http://stackoverflow.com/questions/37810361/rotate-only-the-border-using-css – athi Apr 24 '17 at 13:43
  • That's where i tried the css from but I don't want the entire div to rotate, just the colors. – Si8 Apr 24 '17 at 13:44
  • 1
    What do you get when you rotate red by 30 degrees? Is the constant use of the word 'colors' redundant here? You want to rotate the border without rotating the content? – SpoonMeiser Apr 24 '17 at 13:50
  • The DIV isn't perfect circle so rotating the div without the content would only work if it's a complete circle. So I wanted to have the colors" travel around the DIV. Does it make sense? Maybe I am looking to do the impossible. :/' – Si8 Apr 24 '17 at 13:51
  • Possible duplicate of [CSS Animated Circles - Stop center content from rotating](http://stackoverflow.com/questions/23430891/css-animated-circles-stop-center-content-from-rotating) – Christoph Apr 24 '17 at 13:55
  • 1
    @Christoph this can't work for him because the div isn't a perfect circle. – vlk Apr 24 '17 at 14:12

2 Answers2

3

The only solution I can think of is using pseudo elements (or nested elements) to decouple the border and the center.

.ball-5 {
  background: #fff;
  border-radius: 500px;
  box-shadow: 0px 0px 10px #222;
  padding: 10px;
  cursor: pointer;
  overflow:hidden;
  border:0px;
}

.ball-5 {
  position:relative;
  width: 115px;
  height: 70px;
}

.ball-5:before{
  display:block;position:absolute;
  top:-55px;left:-30px;
  content:"";width:0px;height:0px;
  border: solid 100px;
  border-top-color:  rgba(156, 206, 228, 1);
  border-right-color: rgba(122, 183, 142, 1);
  border-bottom-color: rgba(255, 177, 38, 1);
  border-left-color: rgba(241, 139, 41, 1);
}

.ball-5:after{
  display:block;position:absolute;
  top:10px;left:10px;
  content:"";
  width: 115px;
  height: 70px;
  background:white;
  border-radius: 500px;
}

.ball-5:before {
  animation: Rotate 2s infinite linear;
}

@keyframes Rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<div class="ball-5">
</div>
Christoph
  • 50,121
  • 21
  • 99
  • 128
  • How can I do the rotate only on hover? I tried `.ball-5:hover:before` but that didn't work. – Si8 May 03 '17 at 13:42
  • I just put it inside another parent DIV and used that as a select for `hover` and it worked. Thank you. – Si8 May 03 '17 at 14:17
0

I would say having a div over it that has a transparent background and is the div that has the borders. Then that div rotates on top and it looks like it is the border of the actual element rotating.

Try this:

#containerDiv {
  position: relative;
}
#div, #div2 {
  position: absolute;
  left: 0px; top: 0px;
}
#div2 {
  z-index: 5;
  background: transparent;
  border: 1px black solid;
}
#div {
  background: #f00;
}

div2 will be the animated one and div will be the non-border one. The container will have div and div2 inside it.

Cameron
  • 1,049
  • 12
  • 24