CODEWITHSUNDEEP
csscss-transitions
frenchie
frenchie

Reputation: 51947

Resetting a CSS transition

I want to resize an element with a CSS transition and then reset the element to its original size and restart the animation. Here's the code:

$('#Bar').css('transition', 'none');
$('#Bar').css('-webkit-transition', 'none');
$('#Bar').css('width', 200);
$('#Bar').css('transition', 'width 3s');
$('#Bar').css('-webkit-transition', 'width 3s');
$('#Bar').css('width', 0);

The jsFiddle is here. As you can see, when you click on the resize button using JavaScript the element resizes and the animation restarts. However, it's not working as expected using CSS. What do I need to change?

Upvotes: 0

Views: 3457

Answers (1)

D.Luss
D.Luss

Reputation: 149

You need to use animation instead of transition and use animation: name 5s forwards;. I made example for you http://jsfiddle.net/xsozar7m/4/

CSS:

#box {
    width: 100px;
    background: red;
    height: 20px;
    position: relative;
}
.active {
    height: 20px;
    background: red;
    position: relative;
    -webkit-animation: mymov 5s forwards;
    animation: mymov 5s forwards;
}

/* Chrome, Safari, Opera */

@-webkit-keyframes mymov {
    from {width: 100px;}
    to {width: 0px;}
}

@keyframes mymov {
    from {width: 100px;}
    to {width: 0px;}
}

Javascript:

$('button').on('click', function(){
   $('#box').removeClass('active');
setTimeout(function() {
    $('#box').addClass('active');
},10);
});

HTML:

 <div id="box"></div>
 <button>Start</button>

Upvotes: 2

Related Questions