CSS3 animation-delay causing issue in Firefox

Question

Hi I am trying to animate my logo with CSS3 but I want it to be animated after a few secs so I am using the animation-delay property. It works perfectly fine on Chrome but in Firefox it does delay the animation, but the position it takes is the ending position of animation and then after the delay the animation starts.

HTML

<div class="logo"></div>

CSS

.logo {
position: absolute;
width: 100px;
height: 100px;
background: red;
transform: translate(25px,500px);
-webkit-animation: logo 3s 1;
-moz-animation: logo 3s 1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
}
@-webkit-keyframes logo{
  0% {
    transform: translate(80px, 200px);
  }
  100% {
    transform: translate(25px, 500px);
  }
}
@keyframes logo{
  0% {
    transform: translate(80px, 200px);
  }
  100% {
    transform: translate(25px, 500px);
  }
}

Also this is the fiddle link here

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

The problem is not the animation delay so much as it is that you are initializing the position in the wrong place using the initial transform.

Change .logo { ... transform: translate(25px,500px); } to .logo { ... transform: translate(80px, 200px); }

Demo

To keep it in the final state, add animation-fill-mode:forwards

Also, some of your prefixes should be added/changed. For more information as to which prefixes for transform, animation, etc. you need, please refer to this answer

edited May 23 '17 at 12:27

Community

1
1

answered Aug 22 '14 at 15:52

Zach Saucier

24,871
12
85
147

The thing is I do not want the position of the logo to reset I want it to be positioned here transform: translate(25px, 500px); and that is why on default I have set the position to this transform: translate(25px, 500px);. In your demo you can see when your animation ends it quickly goes to this transform: translate(80px, 200px); position. – fahad.kazi Aug 23 '14 at 05:34
@fahad.kazi Sorry, I didn't check at the end :) to fix that, just add `animation-fill-mode:forwards`. There is no need for javascript of any sort – Zach Saucier Aug 23 '14 at 13:07
I wasn't aware of this property and as things were working in chrome so I did not bother to dig in much deep into the topic. Thank you for letting me know that there is much more than I thought. I will learn more about CSS3. Once again thanks :) – fahad.kazi Aug 24 '14 at 05:35

score 0 · Answer 2 · answered Aug 23 '14 at 07:07

0

After trying almost everything I am switching to Jquery and this works across all browsers.

<div class="logo"></div>
.logo {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    left: 80px;
    top: 200px;
}
$(document).ready(function () {
    $('.logo').delay(3000).animate({
        'left': '25px',
        'top': '500px'
    }, 3000);
});

fiddle

answered Aug 23 '14 at 07:07

fahad.kazi

376
1
2
15

There is no need for javascript of any sort – Zach Saucier Aug 23 '14 at 13:07

score -1 · Answer 3 · answered Aug 22 '14 at 14:13

-1

Try to add another keyframes:

@-moz-keyframes logo {
}

answered Aug 22 '14 at 14:13

Kinnza

1,241
10
13

I have tried this already but it doesn't work also when I remove the the delay property the animation works as it should be but then again i need the delay. – fahad.kazi Aug 22 '14 at 14:17

CSS3 animation-delay causing issue in Firefox

3 Answers3