CODEWITHSUNDEEP
htmlcsscss-transitionscss-animations
fmtoffolo
fmtoffolo

Reputation: 371

CSS animation with fill-mode including transition not working in firefox properly

This works fine in Chrome, but won't in Firefox (Here is the online demo):

HTML

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

CSS

.box {
    background-color:blue;
    width:100px;
    height:100px;
    margin: 0 auto;
    transform: translate(-200px);
    animation-name: test;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    transition: all 0.25s ease;
}

.box:hover {
    border-radius: 100%;
}

@keyframes test {
    100% {
        transform: translate(0px);
    }
}

If I remove the transition it works properly. It seems to be as if the transition, when activated by the on hover, removes the state set by the fill-mode: forwards.

Is there a way around it in firefox?

Upvotes: 3

Views: 1807

Answers (2)

Hashem Qolami
Hashem Qolami

Reputation: 99544

Well, I added a keyframe for the start point 0% to get it to work:

@keyframes test{
  0% {
     transform: translate(-200px);
  }
  100% {
      transform: translate(0px);
  }
}

Using the above, you could remove the transform property form the .box element.

Also, for the old versions of web browsers, consider using vendor prefixes such as -webkit- and -moz-, ... for the @keyframes and the other CSS3 properties.

PS: I tested the demo with FF 9.0.1. This issue may appear only in earlier versions of web browsers. In fact, web browsers try to fix your bad-coding but only the smarters will win!

WORKING DEMO

Update

In order to fix the rendering issue (when the animation starts) you need to change the transition-property from all to the specific properties you really want. (border-radius in this case):

.box{
  animation-name: test;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  transition: border-radius 0.25s ease;
}

The problem was because of the conflict between animation and transition for the transform property.

UPDATED DEMO

Upvotes: 1

djangofan
djangofan

Reputation: 29689

It works for me on Firefox. I put your example into JSFiddle, just as you showed in your question, and it worked for me.

Upvotes: 0

Related Questions