暂停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-。