I tried to pause a CSS transition and came across a question with a solution that seems similar: Is there a way to pause CSS transition mid-way?
However, I couldn't make it work for my code. I suspect the issue lies with the before element.
What could I be doing incorrectly?
$(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>You can try out the code here: http://codepen.io/atticweb/pen/bdjPGj