暫停CSS過渡元素上

Question

之前，我想暫停CSS過渡，發現有一個正確的答案類似的問題：Is there a way to pause CSS transition mid-way?

，但我無法得到它在我的代碼工作。我認爲問題在於之前的因素。

我在做什麼錯了？

$(function() { 
 
    $('.start_timer_1').click(function() { 
 
    $('.timer_1').addClass('start'); 
 
    }); 
 
    $('.pause_timer_1').click(function() { 
 
    $('.timer_1').toggleClass('pause'); 
 
    }); 
 
});

.timer_1 { 
 
    position: relative; 
 
    width: 500px; 
 
    height: 40px; 
 
    background: #efdfe1; 
 
} 
 
.timer_1:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 0%; 
 
    background: #dc281e; 
 
} 
 
.timer_1.start.pause:before { 
 
    background: blue; 
 
    -webkit-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
} 
 
.timer_1.start:before { 
 
    width: 100%; 
 
    -webkit-transition: width 10000ms linear; 
 
    -moz-transition: width 10000ms linear; 
 
    -o-transition: width 10000ms linear; 
 
    -ms-transition: width 10000ms linear; 
 
    transition: width 10000ms linear; 
 
}

<div class="timer_1"></div> 
 
<button class="start_timer_1">Start</button> 
 
<button class="pause_timer_1">Pause</button>

在這裏，您可以測試代碼：http://codepen.io/atticweb/pen/bdjPGj

Answer 1

就在這裏你的問題是你想暫停animation當你有一個transition（自動補間動畫）。

所以不是過渡的你想要的：

@-webkit-keyframes example { 
 
    from { 
 
    width: 0%; 
 
    } 
 
    to { 
 
    width: 100%; 
 
    } 
 
} 
 
@keyframes example { 
 
    from { 
 
    width: 0%; 
 
    } 
 
    to { 
 
    width: 100%; 
 
    } 
 
} 
 
.timer_1.start:before { 
 
    width: 100%; 
 
    -webkit-animation-name: example; 
 
    animation-name: example; 
 
    -webkit-animation-duration: 1s; 
 
    animation-duration: 1s; 
 
    -webkit-animation-timing-function: linear; 
 
    animation-timing-function: linear; 
 
}

你也不必對於transition許多供應商前綴和animations你只需要-webkit-。