Остановить анимацию 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