CODEWITHSUNDEEP
cssanimation
web-stars
web-stars

Reputation: 127

how to repeat css circle animation after hover

I want it to repeat the animation from where the hover has been 'released. So this is what my code looks like:

<section class="container">
  <figure class="chart" data-percent="100">
    <figcaption>HTML</figcaption>
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </figure>
</section>

This is the HTML I have got. 

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 10;
  stroke-dasharray: 534;

  /* firefox bug fix - won't rotate at 90deg angles */
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.chart[data-percent='100'] {
    stroke-dashoffset: 0;
    -webkit-animation: show100 2s;
    animation-name: show100;
    animation-duration:  2s;

}
.chart:hover .outer {
    stroke-dashoffset: 534;
    -webkit-animation: show0 2s;
    animation-name: show0;
    animation-duration:  2s;
}


@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 534;
  }

  to {
    stroke-dashoffset: 0;
  }
}
@keyframes show100 {
  from {
    stroke-dashoffset: 534;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes show0 {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 534;
  }
}
@keyframes show0 {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: 534;
  }
}

I am not sure if 'release' is the right word but I can't think of anything better right now.

So if you hover it, that animation will be reversed. But what I want to accomplish is that when you release the hover at 50%, the animation will play from 50% and when you release the hover at 20% that the animation will play from 20%. I haven't got really, I got stuck after the hover-reverse.

this is a live example of my working code: https://jsfiddle.net/172dLc93/

Thanks

Upvotes: 3

Views: 292

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

Use animation for the initial setup, but then use transitions so that it continues from where it left.

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

body {
  font-family: 'Lato';
}

.container {
 	position:absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}


.chart {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 20px;
  text-align: center;
}

.chart figcaption {
  padding: 50px 25px;
  width: 100px;
  height: 50px;
  border: 20px solid #f0f0f0;
  border-radius: 100px;
  line-height: 50px;
}
.chart svg {
  position: absolute;
  top: 0;
  left: 0;
}

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 10;
  stroke-dasharray: 534;
  transition:stroke-dashoffset 2s;
  /* firefox bug fix - won't rotate at 90deg angles */
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.chart[data-percent='100'] {
	stroke-dashoffset: 0
  
  -webkit-animation: show100 2s;
	animation-name: show100;
	animation-duration:  2s;

}
.chart:hover .outer {
	stroke-dashoffset: 534;
}


@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 534;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes show100 {
  from {
    stroke-dashoffset: 534;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<section class="container">
  
  <figure class="chart" data-percent="100">
    <figcaption>HTML</figcaption>
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </figure>
  
</section>

Updated fiddle: https://jsfiddle.net/gaby/172dLc93/4/

Upvotes: 4

Related Questions