0

I have used keyframe of css3 but in case of mozilla its not working. It is working fine with google chrome.

I used both @keyframe and @-webkit-keyframe, also same with "animation". but its not working I don't know why.

Vivek Kumar
  • 1,204
  • 4
  • 15
  • 35
  • Can you post your exact code please? – thatidiotguy Jul 22 '13 at 18:40
  • Some sample code...? We have almost nothing to go on. You could try taking a look at the CSS properties in Firebug. Chances are, it's expecting a certain property name differently from the one you're using, and will either omit it, or display it with a 'strikethru'. – Katana314 Jul 22 '13 at 18:40
  • actually... I am just using... `
    .... animation:animate 5s linear infinite; -webkit-animation:animate 5s linear infinite; .... } @keyframe animate{ /* some animation*/ } @-webkit-keyframe animate{ /* some animation*/ }`
     – Vivek Kumar Jul 22 '13 at 18:41
  • When you say "Mozilla" do you mean FireFox? [Mozilla hasn't been a stand-alone browser for quite some time now](http://en.wikipedia.org/wiki/Mozilla_Application_Suite). What versions of the browsers are you using? – Sandy Gifford Jul 22 '13 at 18:43
  • yes I am using firefox – Vivek Kumar Jul 22 '13 at 18:45
  • What version of FireFox are you using? – Sandy Gifford Jul 22 '13 at 18:48

1 Answers1

3

You should be specifying mozilla (moz) as well like below:

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
matt
  • 1,015
  • 4
  • 14
  • 28
  • I found on w3school.com that using -webkit- we can also work on mozilla thats why I was not using it.. But it is working thanks anyway – Vivek Kumar Jul 22 '13 at 18:51
  • @CDnDT W3Schools is a great starting point, but has a long history of having spotty accuracy. – Sandy Gifford Jul 22 '13 at 18:52
  • Let me know some great website for css3 tutorial – Vivek Kumar Jul 22 '13 at 19:01
  • Well, for reference, no one beats [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS). They're all about the latest specs. If you want tutorials you may want to check out [CodeSChool](http://www.codeschool.com/), but I find the best way to stay on top of my CSS game is to read blogs that focus on the subject, and to make sure I understand everything I include. – Sandy Gifford Jul 22 '13 at 19:06
  • 1
    If you found my response helpful please mark my answer as accepted. Thanks. Glad you figured it out. – matt Jul 23 '13 at 18:19