0

I having issue to override transition-delay on firefox. Below example works as i expected in Chrome and IE but at Firefox, before animation it is delaying. I am not able to override transition-delay on firefox before animation starts. I believe this is a bug but what is workaround of this problem?

Here is jsfiddle link

Here is Html Codes

<button>move</button>
<div class="box"></div>

Javascript

$('button').click(function(){
    $('.box').addClass('move').on('transitionend',function(){
        $(this).removeClass('move');
    });
});

And CSS

.box{
    height:100px;
    width:100px;
    background-color:yellow;
    transition:all 1s ease 1s;
    position:absolute;
    left:0;
}
.move{
    transition-delay:0;
    left:500px;
}
Freshblood
  • 6,285
  • 10
  • 59
  • 96

1 Answers1

3

You just need to include a unit (seconds in this case):

.move {
    transition-delay: 0s; 
    left: 500px;
}

Updated fiddle

This answer explains why: Units on "0s" Transition in Firefox

Community
  • 1
  • 1
Adrift
  • 58,167
  • 12
  • 92
  • 90
  • You are right, it works well. I couldn't guess this because it was working well in other browsers and also if we use zero value it is ussually redundant to use unit. – Freshblood Mar 05 '14 at 19:18