在迭代的最后一帧停止CSS3动画 - 计数

Question

我用饼形计时器在http://codepen.io/samaxes/pen/KbCHi上设置了一支笔。

但我还没有想出如何在迭代计数的最后一帧停止动画（在此特定示例中为0.9）。

添加以下CSS属性：

-webkit-animation-fill-mode: forwards; 

不会修复它。

Answer 1

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

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

Demo