使用JQuery添加类不会在Safari中重新运行@keyframe css动画？

Question

以下是相关网页：http://alonzo.me/dev/pie/

我正在使用与此处显示的相同的基本标记：https://phuu.net/2012/05/01/html-css-only-spinner.html

由于某种原因，除了safari之外，它在每个浏览器中都运行良好。

我一直致力于使用@keyframe动画创建一个仅限CSS的饼图，并将animation-iteration-count设置为十进制，以便仅运行动画的一定百分比。所以我为每个百分比设置了一个班级（我不确定是否有更好的方法），如下所示：

.percent-1 .circle-fill,
.percent-1 .circle-fill-cover,
.percent-1 .circle-fill-cover-cover {
    -webkit-animation-iteration-count: 0.01;
    -moz-animation-iteration-count: 0.01;
    -o-animation-iteration-count: 0.01;
    animation-iteration-count: 0.01;
}
.percent-2 .circle-fill,
.percent-2 .circle-fill-cover,
.percent-2 .circle-fill-cover-cover {
    -webkit-animation-iteration-count: 0.02;
    -moz-animation-iteration-count: 0.02;
    -o-animation-iteration-count: 0.02;
    animation-iteration-count: 0.02;
}

......依次从 .percent-0 到 .percent-100

是的，这是很多课程。

出于某种原因，Safari不会将元素旋转到应该如何。在下面的代码段中，我链接到外部css文件，因为代码段的样式太多了。

对此的任何帮助将不胜感激！ ：）

＆＃13;

＆＃13;

$(document).ready(function(){

var percentageValue = $('#percentage-value');
var circleBG = $('.circle-background');

$('.jquery-area input[type="range"]').on("change mousemove", function() {
    var newClass = "percent-"+$(this).val();
    circleBG.attr('class', 'circle-background').addClass(newClass);
    $('.jquery-area input[type="number"]').val($(this).val());
});

$('.jquery-area input[type="number"]').bind('keyup mouseup', function () {
    var newClass = "percent-"+$(this).val();
    circleBG.attr('class', 'circle-background').addClass(newClass);    
    $('.jquery-area input[type="range"]').val($(this).val());
});

});

＆＃13;

.flex-center{
	display: flex;
	justify-content: center;
}
.jquery-area {
    padding: 10px;
    border: 1px solid #BBB;
    position: relative;
    margin-top: 50px;
}
.jquery-area input {
    float: left;
}
.jquery-area p {
    margin-top: 0;
    margin-bottom: 0;
    height: 22;
    line-height: 22px;
    display: inline-block;
    background-color: white;
    position: absolute;
    top: -11px;
    padding: 0 5px;
}
.jquery-area input[type="range"] {
    height: 22px;
    margin-right: 10px;
    display: inline;
}
.jquery-area input[type="number"] {
    height: 26px;
    width: 40px;
    padding-left: 3px;
}

.circle-background {
	position: relative;
	height: 100px;
	width: 100px;
	background: #06A;
	border-radius: 100%;
	-webkit-mask-box-image: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,1) 68%,rgba(0,0,0,0) 69.5%);
	-moz-mask-box-image: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,1) 68%,rgba(0,0,0,0) 69.5%);
	-o-mask-box-image: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,1) 68%,rgba(0,0,0,0) 69.5%);
	mask-box-image: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,1) 68%,rgba(0,0,0,0) 69.5%);
	overflow: hidden;
}
.circle-fill, .circle-fill-cover, .circle-fill-cover-cover {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 0px;
	height: 0px;
	border-width: 50px;
	border-style: solid;
	border-color: transparent;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.circle-fill {
	border-top-color: #09F;
	-webkit-animation: circle-fill-animation 2s linear;
	-moz-animation: circle-fill-animation 2s linear;
	-o-animation: circle-fill-animation 2s linear;
	animation: circle-fill-animation 2s linear;
}
.circle-fill-cover {
	content: "";
	border-top-color: #06A;
	-webkit-animation: circle-fill-cover-animation 2s linear;
	-moz-animation: circle-fill-cover-animation 2s linear;
	-o-animation: circle-fill-cover-animation 2s linear;
	animation: circle-fill-cover-animation 2s linear;
}
.circle-fill-cover-cover {
	content: "";
	border-right-color: #09F;
	opacity: 0;
	-webkit-animation: circle-fill-cover-cover-animation 2s linear;
	-moz-animation: circle-fill-cover-cover-animation 2s linear;
	-o-animation: circle-fill-cover-cover-animation 2s linear;
	animation: circle-fill-cover-cover-animation 2s linear;
}

/* This needs to go at the end */
.circle-fill, .circle-fill-cover, .circle-fill-cover-cover {
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="http://alonzo.me/dev/pie/animation-percentages.css" rel="stylesheet"/>
<div class="flex-center">
  <div class="circle-background percent-85">
    <span class="circle-fill"></span>
    <span class="circle-fill-cover"></span>
    <span class="circle-fill-cover-cover"></span>
  </div>
</div>

<div class="flex-center">
	<div class="jquery-area">
		<p>Percentage:</p>
		<br>
		<input type="range" name="points" min="0" max="100" value="85"><input type="number" min="0" max="100" step="1" value="85"/>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;