CODEWITHSUNDEEP
htmlcssfirefox
user2225809
user2225809

Reputation: 101

CSS animation and transition are not cooperating in Firefox

It works in Chrome. I have no idea why Firefox is making such problems. Text should fade in. It should also change it's color on mouse hover. Unfortunately Firefox does something else - it forces the text to fade in and out every time I hover my cursor over it.

http://jsfiddle.net/76mfr/2/

CSS:

.sangwinik{
   opacity: 0;
   transition: 500ms ease-in-out;
   -moz-animation-name: fadein;
   -moz-animation-fill-mode:forwards;
   -moz-animation-iteration-count: 1;
   -moz-animation-duration: 1.5s;
}

@-moz-keyframes fadein {
   0%{
      opacity: 0;
    }
   100%{
      opacity: 1;
    }
}

.sangwinik:hover{
   color: #55C1E5;
   text-shadow: 0 0 3px #00FFFF;
}

HTML:

<p class="sangwinik">Sangwinik</p>

Upvotes: 1

Views: 227

Answers (2)

Corneliu
Corneliu

Reputation: 1110

Since Firefox 16, the browser expects the W3C property without the -moz prefix; have a look at some more info.

This should work:

.sangwinik{
   opacity: 0;
   transition: 500ms ease-in-out;
   animation-name: fadein;
   animation-fill-mode:forwards;
   animation-iteration-count: 1;
   animation-duration: 1.5s;
}

@keyframes fadein {
   0%{
      opacity: 0;
    }
   100%{
      opacity: 1;
    }
}

.sangwinik:hover{
   color: #55C1E5;
   text-shadow: 0 0 3px #00FFFF;
}

Note that is always good to also include the properties without the vendor prefixes (-moz, -webkit), as they will surely be droped in future versions.

Upvotes: 1

Adrift
Adrift

Reputation: 59799

Instead of using all, specify only the properties you want to transition (color and text-shadow):

.sangwinik {
    opacity: 0;
    transition: color 500ms ease-in-out,
                text-shadow 500ms ease-in-out;
   -moz-animation-name: fadein;
   -moz-animation-fill-mode:forwards;
   -moz-animation-iteration-count: 1;
   -moz-animation-duration: 1.5s;
}

.sangwinik:hover {
    color: #55C1E5;
    text-shadow: 0 0 3px #00FFFF;
}

Updated fiddle (I think opacity was being transitioned as well)

Upvotes: 1

Related Questions