Clever Geek Handbook

Animation / keyframes not working in Firefox (triggering a CSS animation with JavaScript)

This code works in the current chrome and internet explorer, but not in the current firefox (UPDATED Code with unnecessary -moz prefix ):

@-moz-keyframes sh-tada {
  10% {
    opacity:1;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes sh-tada {
  10% {
    opacity:1;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@keyframes sh-tada {
  10% {
    opacity:1;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

.sh-tada {
  opacity:0;
  -webkit-animation: sh-tada 2s linear 1;
  -moz-animation: sh-tada 2s linear 1;
  animation: sh-tada 2s linear 1;
}

The item is not displayed at all.

Alas, none of the other equally titled questions will help in this case ...

ADDITION / ADVICE

Perhaps my problem is not in the code above, but in the question

How is CSS animation activated?

This element is simply enabled with ...style.display='inline'

. For Chrome and IE, this looks fine. But isn't that okay for firefox?

+3


source to share


2 answers


You forgot to add a rule for firefox. checkout the following code



@-webkit-keyframes sh-tada {
  10% {
    opacity:1;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@-moz-keyframes sh-tada {
  10% {
    opacity:1;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@keyframes sh-tada {
  10% {
    opacity:1;
  }
  80% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

.sh-tada {
  opacity:0;
  -webkit-animation: sh-tada 2s linear 1;
  -moz-animation: sh-tada 2s linear 1;
  animation: sh-tada 2s linear 1;
}
+2


source


This is because you are missing the definition for Mozilla Broswer keyframes.

@-moz-keyframes sh-tada {
10% {
    opacity:1;
}
80% {
    opacity:1;
}
100% {
    opacity:0;
}
}

and moz-animation



.sh-tada {
  -moz-animation:sh-tada 2s linear 1;
}

Add them to your css and it should work.

+1


source






More articles:


All Articles