title: Firefox CSS animations not working?
body: <p>Check out the Path-like menu <strong><a href="http://jsfiddle.net/U7cjj/1/" rel="nofollow">http://jsfiddle.net/U7cjj/1/</a></strong> and click on the orange button to see the menu fan out. This effect is accomplished by toggling class using jQuery and CSS animations.</p>
  
  <p>The demo works in webkit-based browsers but not on Firefox. The class is properly toggled on click but no menu items show. Does Firefox not support this type of css animations? Is there a way to make it work by using polyfill or a Javascript/jQuery fallback?</p>
  
  <p>CSS below:</p>
  
  <pre><code>/* Global Reset
  ------------------------------------------------------------------------------*/
  /* http://meyerweb.com/eric/tools/css/reset/
     v2.0 | 20110126
     License: none (public domain)
  */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; }
  
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
    display: block; }
  
  body {
    line-height: 1; }
  
  ol, ul {
    list-style: none; }
  
  blockquote, q {
    quotes: none; }
  
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none; }
  
  table {
    border-collapse: collapse;
    border-spacing: 0; }
  
  .force3d, .animation-flyout, section.container div.button.expanded.cam, section.container div.button.expanded.friend, section.container div.button.expanded.location, section.container div.button.expanded.music, section.container div.button.expanded.comment, section.container div.button.expanded.status, .animation-flyin, section.container div.button.collapsed.cam, section.container div.button.collapsed.friend, section.container div.button.collapsed.location, section.container div.button.collapsed.music, section.container div.button.collapsed.comment, section.container div.button.collapsed.status {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform-style: preserve-3d; }
  
  .animation-flyout, section.container div.button.expanded.cam, section.container div.button.expanded.friend, section.container div.button.expanded.location, section.container div.button.expanded.music, section.container div.button.expanded.comment, section.container div.button.expanded.status {
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.3);
    -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.3);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.3);
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both; }
  
  .animation-flyin, section.container div.button.collapsed.cam, section.container div.button.collapsed.friend, section.container div.button.collapsed.location, section.container div.button.collapsed.music, section.container div.button.collapsed.comment, section.container div.button.collapsed.status {
    -webkit-animation-timing-function: cubic-bezier(0.6, -0.3, 0.735, 0.045);
    -moz-animation-timing-function: cubic-bezier(0.6, -0.3, 0.735, 0.045);
    animation-timing-function: cubic-bezier(0.6, -0.3, 0.735, 0.045);
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both; }
  
  @-webkit-keyframes flyout-cam {
    0% {
      -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
      -moz-transform: translate3d(0, 0, 0) rotate(0deg);
      -ms-transform: translate3d(0, 0, 0) rotate(0deg);
      -o-transform: translate3d(0, 0, 0) rotate(0deg);
      transform: translate3d(0, 0, 0) rotate(0deg); }
  
    100% {
      -webkit-transform: translate3d(0px, -136px, 0) rotate(360deg);
      -moz-transform: translate3d(0px, -136px, 0) rotate(360deg);
      -ms-transform: translate3d(0px, -136px, 0) rotate(360deg);
      -o-transform: translate3d(0px, -136px, 0) rotate(360deg);
      transform: translate3d(0px, -136px, 0) rotate(360deg); } }
  
  @-webkit-keyframes flyout-friend {
    0% {
      -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
      -moz-transform: translate3d(0, 0, 0) rotate(0deg);
      -ms-transform: translate3d(0, 0, 0) rotate(0deg);
      -o-transform: translate3d(0, 0, 0) rotate(0deg);
      transform: translate3d(0, 0, 0) rotate(0deg); }
  
    100% {
      -webkit-transform: translate3d(42px, -129px, 0) rotate(360deg);
      -moz-transform: translate3d(42px, -129px, 0) rotate(360deg);
      -ms-transform: translate3d(42px, -129px, 0) rotate(360deg);
      -o-transform: translate3d(42px, -129px, 0) rotate(360deg);
      transform: translate3d(42px, -129px, 0) rotate(360deg); } }
  
  @-webkit-keyframes flyout-location {
    0% {
      -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
      -moz-transform: translate3d(0, 0, 0) rotate(0deg);
      -ms-transform: translate3d(0, 0, 0) rotate(0deg);
      -o-transform: translate3d(0, 0, 0) rotate(0deg);
      transform: translate3d(0, 0, 0) rotate(0deg); }
  
    100% {
      -webkit-transform: translate3d(80px, -110px, 0) rotate(360deg);
      -moz-transform: translate3d(80px, -110px, 0) rotate(360deg);
      -ms-transform: translate3d(80px, -110px, 0) rotate(360deg);
      -o-transform: translate3d(80px, -110px, 0) rotate(360deg);
      transform: translate3d(80px, -110px, 0) rotate(360deg); } }
  
  @-webkit-keyframes flyout-music {
    0% {
      -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
      -moz-transform: translate3d(0, 0, 0) rotate(0deg);
      -ms-transform: translate3d(0, 0, 0) rotate(0deg);
      -o-transform: translate3d(0, 0, 0) rotate(0deg);
      transform: translate3d(0, 0, 0) rotate(0deg); }
  
    100% {
      -webkit-transform: translate3d(110px, -80px, 0) rotate(360deg);
      -moz-transform: translate3d(110px, -80px, 0) rotate(360deg);
      -ms-transform: translate3d(110px, -80px, 0) rotate(360deg);
      -o-transform: translate3d(110px, -80px, 0) rotate(360deg);
      transform: translate3d(110px, -80px, 0) rotate(360deg); } }
  
  @-webkit-keyframes flyout-comment {
    0% {
      -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
      -moz-transform: translate3d(0, 0, 0) rotate(0deg);
      -ms-transform: translate3d(0, 0, 0) rotate(0deg);
      -o-transform: translate3d(0, 0, 0) rotate(0deg);
      transform: translate3d(0, 0, 0) rotate(0deg); }
  
    100% {
      -webkit-transform: translate3d(129px, -42px, 0) rotate(360deg);
      -moz-transform: translate3d(129px, -42px, 0) rotate(360deg);
      -ms-transform: translate3d(129px, -42px, 0) rotate(360deg);
      -o-transform: translate3d(129px, -42px, 0) rotate(360deg);
      transform: translate3d(129px, -42px, 0) rotate(360deg); } }
  
  @-webkit-keyframes flyout-status {
    0% {
      -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
      -moz-transform: translate3d(0, 0, 0) rotate(0deg);
      -ms-transform: translate3d(0, 0, 0) rotate(0deg);
      -o-transform: translate3d(0, 0, 0) rotate(0deg);
      transform: translate3d(0, 0, 0) rotate(0deg); }
  
    100% {
      -webkit-transform: translate3d(136px, 0px, 0) rotate(360deg);
      -moz-transform: translate3d(136px, 0px, 0) rotate(360deg);
      -ms-transform: translate3d(136px, 0px, 0) rotate(360deg);
      -o-transform: translate3d(136px, 0px, 0) rotate(360deg);
      transform: translate3d(136px, 0px, 0) rotate(360deg); } }
  
  @-webkit-keyframes flyin-cam {
    0% {
      -webkit-transform: translate3d(0px, -136px, 0) rotate(0deg);
      -moz-transform: translate3d(0px, -136px, 0) rotate(0deg);
      -ms-transform: translate3d(0px, -136px, 0) rotate(0deg);
      -o-transform: translate3d(0px, -136px, 0) rotate(0deg);
      transform: translate3d(0px, -136px, 0) rotate(0deg); }
  
    40% {
      -webkit-transform: translate3d(0px, -136px, 0) rotate(360deg);
      -moz-transform: translate3d(0px, -136px, 0) rotate(360deg);
      -ms-transform: translate3d(0px, -136px, 0) rotate(360deg);
      -o-transform: translate3d(0px, -136px, 0) rotate(360deg);
      transform: translate3d(0px, -136px, 0) rotate(360deg); }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0) rotate(360deg);
      -moz-transform: translate3d(0, 0, 0) rotate(360deg);
      -ms-transform: translate3d(0, 0, 0) rotate(360deg);
      -o-transform: translate3d(0, 0, 0) rotate(360deg);
      transform: translate3d(0, 0, 0) rotate(360deg); } }
  
  @-webkit-keyframes flyin-friend {
    0% {
      -webkit-transform: translate3d(42px, -129px, 0) rotate(0deg);
      -moz-transform: translate3d(42px, -129px, 0) rotate(0deg);
      -ms-transform: translate3d(42px, -129px, 0) rotate(0deg);
      -o-transform: translate3d(42px, -129px, 0) rotate(0deg);
      transform: translate3d(42px, -129px, 0) rotate(0deg); }
  
    40% {
      -webkit-transform: translate3d(42px, -129px, 0) rotate(360deg);
      -moz-transform: translate3d(42px, -129px, 0) rotate(360deg);
      -ms-transform: translate3d(42px, -129px, 0) rotate(360deg);
      -o-transform: translate3d(42px, -129px, 0) rotate(360deg);
      transform: translate3d(42px, -129px, 0) rotate(360deg); }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0) rotate(360deg);
      -moz-transform: translate3d(0, 0, 0) rotate(360deg);
      -ms-transform: translate3d(0, 0, 0) rotate(360deg);
      -o-transform: translate3d(0, 0, 0) rotate(360deg);
      transform: translate3d(0, 0, 0) rotate(360deg); } }
  
  @-webkit-keyframes flyin-location {
    0% {
      -webkit-transform: translate3d(80px, -110px, 0) rotate(0deg);
      -moz-transform: translate3d(80px, -110px, 0) rotate(0deg);
      -ms-transform: translate3d(80px, -110px, 0) rotate(0deg);
      -o-transform: translate3d(80px, -110px, 0) rotate(0deg);
      transform: translate3d(80px, -110px, 0) rotate(0deg); }
  
    40% {
      -webkit-transform: translate3d(80px, -110px, 0) rotate(360deg);
      -moz-transform: translate3d(80px, -110px, 0) rotate(360deg);
      -ms-transform: translate3d(80px, -110px, 0) rotate(360deg);
      -o-transform: translate3d(80px, -110px, 0) rotate(360deg);
      transform: translate3d(80px, -110px, 0) rotate(360deg); }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0) rotate(360deg);
      -moz-transform: translate3d(0, 0, 0) rotate(360deg);
      -ms-transform: translate3d(0, 0, 0) rotate(360deg);
      -o-transform: translate3d(0, 0, 0) rotate(360deg);
      transform: translate3d(0, 0, 0) rotate(360deg); } }
  
  @-webkit-keyframes flyin-music {
    0% {
      -webkit-transform: translate3d(110px, -80px, 0) rotate(0deg);
      -moz-transform: translate3d(110px, -80px, 0) rotate(0deg);
      -ms-transform: translate3d(110px, -80px, 0) rotate(0deg);
      -o-transform: translate3d(110px, -80px, 0) rotate(0deg);
      transform: translate3d(110px, -80px, 0) rotate(0deg); }
  
    40% {
      -webkit-transform: translate3d(110px, -80px, 0) rotate(360deg);
      -moz-transform: translate3d(110px, -80px, 0) rotate(360deg);
      -ms-transform: translate3d(110px, -80px, 0) rotate(360deg);
      -o-transform: translate3d(110px, -80px, 0) rotate(360deg);
      transform: translate3d(110px, -80px, 0) rotate(360deg); }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0) rotate(360deg);
      -moz-transform: translate3d(0, 0, 0) rotate(360deg);
      -ms-transform: translate3d(0, 0, 0) rotate(360deg);
      -o-transform: translate3d(0, 0, 0) rotate(360deg);
      transform: translate3d(0, 0, 0) rotate(360deg); } }
  
  @-webkit-keyframes flyin-comment {
    0% {
      -webkit-transform: translate3d(129px, -42px, 0) rotate(0deg);
      -moz-transform: translate3d(129px, -42px, 0) rotate(0deg);
      -ms-transform: translate3d(129px, -42px, 0) rotate(0deg);
      -o-transform: translate3d(129px, -42px, 0) rotate(0deg);
      transform: translate3d(129px, -42px, 0) rotate(0deg); }
  
    40% {
      -webkit-transform: translate3d(129px, -42px, 0) rotate(360deg);
      -moz-transform: translate3d(129px, -42px, 0) rotate(360deg);
      -ms-transform: translate3d(129px, -42px, 0) rotate(360deg);
      -o-transform: translate3d(129px, -42px, 0) rotate(360deg);
      transform: translate3d(129px, -42px, 0) rotate(360deg); }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0) rotate(360deg);
      -moz-transform: translate3d(0, 0, 0) rotate(360deg);
      -ms-transform: translate3d(0, 0, 0) rotate(360deg);
      -o-transform: translate3d(0, 0, 0) rotate(360deg);
      transform: translate3d(0, 0, 0) rotate(360deg); } }
  
  @-webkit-keyframes flyin-status {
    0% {
      -webkit-transform: translate3d(136px, 0px, 0) rotate(0deg);
      -moz-transform: translate3d(136px, 0px, 0) rotate(0deg);
      -ms-transform: translate3d(136px, 0px, 0) rotate(0deg);
      -o-transform: translate3d(136px, 0px, 0) rotate(0deg);
      transform: translate3d(136px, 0px, 0) rotate(0deg); }
  
    40% {
      -webkit-transform: translate3d(136px, 0px, 0) rotate(360deg);
      -moz-transform: translate3d(136px, 0px, 0) rotate(360deg);
      -ms-transform: translate3d(136px, 0px, 0) rotate(360deg);
      -o-transform: translate3d(136px, 0px, 0) rotate(360deg);
      transform: translate3d(136px, 0px, 0) rotate(360deg); }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0) rotate(360deg);
      -moz-transform: translate3d(0, 0, 0) rotate(360deg);
      -ms-transform: translate3d(0, 0, 0) rotate(360deg);
      -o-transform: translate3d(0, 0, 0) rotate(360deg);
      transform: translate3d(0, 0, 0) rotate(360deg); } }
  
  .clearfix {
    zoom: 1; }
    .clearfix:before, .clearfix:after {
      content: "";
      display: table; }
    .clearfix:after {
      clear: both; }
  
  body, html {
    background: white; }
  
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
  
  div.inner-wrapper {
    padding: 20px; }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 100; }
  
  a, a:link, a:active, a:visited {
    color: #fc511d;
    text-decoration: none; }
  
  a:hover {
    color: #c93103; }
  
  ::selection {
    background: #fc511d; }
  
  ::-moz-selection {
    background: #fc511d; }
  
  section.container {
    width: 400px;
    margin: 200px auto;
    position: relative; }
    section.container div.open-button {
      background-color: #fc511d;
      -webkit-border-radius: 120px;
      -moz-border-radius: 120px;
      -ms-border-radius: 120px;
      -o-border-radius: 120px;
      border-radius: 120px;
      height: 40px;
      width: 40px;
      text-align: center;
      position: relative; }
    section.container div.button {
      background-color: #454545;
      -webkit-border-radius: 40px;
      -moz-border-radius: 40px;
      -ms-border-radius: 40px;
      -o-border-radius: 40px;
      border-radius: 40px;
      color: white;
      float: left;
      font-size: 11px;
      height: 32px;
      left: 4px;
      line-height: 3em;
      position: absolute;
      text-align: center;
      top: 4px;
      width: 32px;
      -webkit-transition-property: all;
      -moz-transition-property: all;
      -ms-transition-property: all;
      -o-transition-property: all;
      transition-property: all;
      -webkit-transition-duration: 0.15s;
      -moz-transition-duration: 0.15s;
      -ms-transition-duration: 0.15s;
      -o-transition-duration: 0.15s;
      transition-duration: 0.15s;
      -webkit-transition-timing-function: ease-out;
      -moz-transition-timing-function: ease-out;
      -ms-transition-timing-function: ease-out;
      -o-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
      -webkit-transition-delay: 0;
      -moz-transition-delay: 0;
      -ms-transition-delay: 0;
      -o-transition-delay: 0;
      transition-delay: 0; }
      section.container div.button.expanded:hover {
        zoom: 1.2; }
      section.container div.button.expanded.cam {
        -webkit-animation-name: flyout-cam;
        -moz-animation-name: flyout-cam;
        animation-name: flyout-cam;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0s;
        -moz-animation-delay: 0s;
        animation-delay: 0s; }
      section.container div.button.expanded.friend {
        -webkit-animation-name: flyout-friend;
        -moz-animation-name: flyout-friend;
        animation-name: flyout-friend;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0.05s;
        -moz-animation-delay: 0.05s;
        animation-delay: 0.05s; }
      section.container div.button.expanded.location {
        -webkit-animation-name: flyout-location;
        -moz-animation-name: flyout-location;
        animation-name: flyout-location;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0.1s;
        -moz-animation-delay: 0.1s;
        animation-delay: 0.1s; }
      section.container div.button.expanded.music {
        -webkit-animation-name: flyout-music;
        -moz-animation-name: flyout-music;
        animation-name: flyout-music;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0.15s;
        -moz-animation-delay: 0.15s;
        animation-delay: 0.15s; }
      section.container div.button.expanded.comment {
        -webkit-animation-name: flyout-comment;
        -moz-animation-name: flyout-comment;
        animation-name: flyout-comment;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        animation-delay: 0.2s; }
      section.container div.button.expanded.status {
        -webkit-animation-name: flyout-status;
        -moz-animation-name: flyout-status;
        animation-name: flyout-status;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0.25s;
        -moz-animation-delay: 0.25s;
        animation-delay: 0.25s; }
      section.container div.button.collapsed.cam {
        -webkit-animation-name: flyin-cam;
        -moz-animation-name: flyin-cam;
        animation-name: flyin-cam;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0.25s;
        -moz-animation-delay: 0.25s;
        animation-delay: 0.25s; }
      section.container div.button.collapsed.friend {
        -webkit-animation-name: flyin-friend;
        -moz-animation-name: flyin-friend;
        animation-name: flyin-friend;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        animation-delay: 0.2s; }
      section.container div.button.collapsed.location {
        -webkit-animation-name: flyin-location;
        -moz-animation-name: flyin-location;
        animation-name: flyin-location;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0.15s;
        -moz-animation-delay: 0.15s;
        animation-delay: 0.15s; }
      section.container div.button.collapsed.music {
        -webkit-animation-name: flyin-music;
        -moz-animation-name: flyin-music;
        animation-name: flyin-music;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0.1s;
        -moz-animation-delay: 0.1s;
        animation-delay: 0.1s; }
      section.container div.button.collapsed.comment {
        -webkit-animation-name: flyin-comment;
        -moz-animation-name: flyin-comment;
        animation-name: flyin-comment;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0.05s;
        -moz-animation-delay: 0.05s;
        animation-delay: 0.05s; }
      section.container div.button.collapsed.status {
        -webkit-animation-name: flyin-status;
        -moz-animation-name: flyin-status;
        animation-name: flyin-status;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0s;
        -moz-animation-delay: 0s;
        animation-delay: 0s; }
  
  div.open-button p {font-size:12px; padding-top:8px;}
  </code></pre>