css动画停留在最后一帧,在迭代计数的最后一帧停止CSS3动画(Stop a CSS3 Animation at the la...

你真的不能。 但是，如果你设置了动画对象，你希望他们在最后的状态，这是比较容易得到你要找的效果：

.wrapper {

position: relative;

margin: 40px auto;

background: #d5d5d5;

border-radius: 50%;

}

@mixin timer($item, $duration, $size, $color, $end, $hover: pause) {

#{$item}, #{$item} * { @include box-sizing(border-box); }

#{$item} {

width: $size;

height: $size;

}

#{$item} .pie {

width: 50%;

height: 100%;

transform-origin: 100% 50%;

position: absolute;

background: $color;

}

#{$item} .spinner {

border-radius: 100% 0 0 100% / 50% 0 0 50%;

z-index: 200;

transform: rotate(360deg*.9);

animation: rota $duration + s linear $end;

}

#{$item}:hover .spinner,

#{$item}:hover .filler,

#{$item}:hover .mask {

animation-play-state: $hover;

}

#{$item} .filler {

border-radius: 0 100% 100% 0 / 0 50% 50% 0;

left: 50%;

opacity: 1;

z-index: 100;

animation: opa $duration + s steps(1,end) $end reverse;

}

#{$item} .mask {

border-radius: 100% 0 0 100% / 50% 0 0 50%;

width: 50%;

height: 100%;

position: absolute;

background: inherit;

z-index: 300;

opacity: 0;

animation: opa $duration + s steps(1,end) $end;

}

@keyframes rota {

0% { transform: rotate(0deg); }

90% { transform: rotate(360deg*.9); }

}

@keyframes opa {

0% { opacity: 1; }

50%, 100% { opacity: 0; }

}

}

@include timer('.wrapper', 5, 250px, #6c6, 0.9);

演示