1

In my website I have a div in which I have given border radius 100%. I want an animation, when I hover on the circle div its border should fill up 100% with animation. I am new in css3 and jquery. How can I do that? Thanks

<div class="circle"></div>

I have tried this, but not working

.circle {
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #E94E3D;
  box-shadow: 60px -60px 0 2px #e94e3d, -60px -60px 0 2px #e94e3d, -60px 60px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #e94e3d;
}

.circle .text {
  position: absolute;
  top: 38px;
  left: 30px;
  width: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font: 18px sans-serif;
  transition: opacity .2s ease;
}
.circle:hover {
  animation: border .4s ease 1 forwards;
  cursor: none;
}

@keyframes border {
  0% {
    box-shadow: 60px -60px 0 2px #e94e3d, -60px -60px 0 2px #e94e3d, -60px 60px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #e94e3d;
  }
  25% {
    box-shadow: 0 -125px 0 2px #e94e3d, -60px -60px 0 2px #e94e3d, -60px 60px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #ffffff;
  }
  50% {
    box-shadow: 0 -125px 0 2px #e94e3d, -125px 0px 0 2px #e94e3d, -60px 60px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #ffffff;
  }
  75% {
    box-shadow: 0 -125px 0 2px #e94e3d, -125px 0px 0 2px #e94e3d, 0px 125px 0 2px #e94e3d, 60px 60px 0 2px #e94e3d, 0 0 0 2px #ffffff;
  }
  100% {
    box-shadow: 0 -125px 0 2px #e94e3d, -125px 0px 0 2px #e94e3d, 0px 125px 0 2px #e94e3d, 120px 40px 0 2px #e94e3d, 0 0 0 2px #ffffff;
  }
}
user3396867
  • 109
  • 2
  • 11
  • Please show us some code so we don't have to guess! – Franco Dec 12 '15 at 00:17
  • please check the update. Thanks – user3396867 Dec 12 '15 at 00:28
  • What do you mean by "border should fill up 100% with animation"? Can you provide some image as example. – Ibrahim Khan Dec 12 '15 at 06:52
  • I think you're looking for something like [this](http://stackoverflow.com/questions/31198304/count-down-timer-with-circular-progress-bar/31199281#31199281). It can be done with lesser no. of elements (by using gradients and other fancy stuff but they have lower browser support than CSS transforms). – Harry Dec 12 '15 at 07:12

0 Answers0