Question

我想让它重复播放悬停的动画。所以这就是我的代码：

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

这是我的HTML。

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

我不确定'释放'是否是正确的词，但我现在想不出更好的东西。

因此，如果您将其悬停，则该动画将被撤消。但我想要实现的是，当您以50％的速度释放悬停时，动画将从50％开始播放，当您以20％的速度释放悬停时，动画将从20％开始播放。我没有真的，我在悬停反转后卡住了。

这是我工作代码的实例： https://jsfiddle.net/172dLc93/

谢谢

Answer 1

使用动画进行初始设置，但随后使用过渡以使其从离开的位置继续。

@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>

更新了小提琴：https://jsfiddle.net/gaby/172dLc93/4/

如何在悬停后重复css圈动画

1 个答案: