javascript - Firefox CSS 动画不工作？

Question

查看类似路径的菜单 http://jsfiddle.net/U7cjj/1/ 并单击橙色按钮以查看展开的菜单。这种效果是通过使用 jQuery 和 CSS 动画切换类来实现的。

该演示适用于基于 webkit 的浏览器，但不适用于 Firefox。该类在单击时正确切换，但没有显示菜单项。 Firefox 不支持这种类型的 css 动画吗？有没有办法通过使用 polyfill 或 Javascript/jQuery 回退来使其工作？

下面的 CSS:

/* 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;}

Answer 1

您只为 -webkit- 指定了关键帧。对于 Mozilla，您应该复制它而不带任何前缀。

我为你做了一个:
http://jsfiddle.net/AbdiasSoftware/U7cjj/2/

  @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); }

正如您现在看到的，它也适用于 Firefox。