CSS 转换根本不起作用答案

【问题标题】：CSS Transitions not working, at allCSS 转换根本不起作用
【发布时间】：2014-01-01 16:28:15
【问题描述】：

我有以下两个代码

.button:hover {
   -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
      -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
        -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
           transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

和

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.animated.flipInX {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    -moz-backface-visibility: visible !important;
    -moz-animation-name: flipInX;
    -o-backface-visibility: visible !important;
    -o-animation-name: flipInX;
    backface-visibility: visible !important;
    animation-name: flipInX;
}
.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}

第一个代码在每个浏览器上都能完美运行。它提供了所需的过渡。但是当我使用第二个代码时，它在 Chrome 上完美运行。但不适用于任何其他浏览器。

我在这里阅读了其他问题，遇到了here。正如它所建议的，我不应该使用 -moz -o -webkit。但这对我不起作用。

那个页面上也有一个小提琴，http://jsfiddle.net/EghZs/。它只适用于我的 chrome。而不是在任何其他浏览器上。

这是我的浏览器的问题吗？或者这是代码的问题？

【问题讨论】：

您在使用哪些浏览器时遇到问题？ Chrome、Firefox、Safari 几乎都遵循相同的标准。另一方面，IE...
问题出在 Firefox 26、IE（全部）、Opera（最新）和 Safari（最新）上。唯一可用的浏览器是 Chrome
我认为问题出在您的计算机上，小提琴在 safari、FF 和 Chrome 中对我有用。我在mac上，所以我没有IE
问题出在 FireFox 26 上？ jsfiddle.net/EghZs 这个小提琴适用于 FF26
那我会在另一台电脑上检查。您能否检查this 链接是否适用于所有浏览器？因为那是我遇到问题的地方。

标签： html css transitions

【解决方案1】：

您似乎没有在 @ 级别指定足够的浏览器，而且在您的 @-moz 块中，根据Mozilla's current documentation.，转换应该只是“transform”而不是“-moz-transform”（由于旧版本的 Firefox 仍然使用 -moz-transform，您可能不得不使用 @support 块来同时管理旧版本和新版本的 Firefox。）

所以本质上，在更正 -moz-transform 并为其他浏览器添加正确的支持和前缀之后，你应该会很好。

我会尝试（为简洁起见，压缩你的间距）：

@-webkit-keyframes flipInX {
  /* same block as you already have */
}

@-moz-keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% { transform: perspective(400px) rotateX(-10deg); }
  70% { transform: perspective(400px) rotateX(10deg); }
  100% { transform: perspective(400px) rotateX(0deg); }
}

@-o-keyframes flipInX {  /* Opera */
  0% {
    -o-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% { -o-transform: perspective(400px) rotateX(-10deg); }
  70% { -o-transform: perspective(400px) rotateX(10deg); }
  100% { -o-transform: perspective(400px) rotateX(0deg); }
}

@keyframes flipInX {
  /* this will cover other browsers that
     support keyframes and transforms */
  0% {
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% { 
   -ms-transform: perspective(400px) rotateX(-10deg);
   transform: perspective(400px) rotateX(-10deg); 
  }
  70% { 
    -ms-transform: perspective(400px) rotateX(10deg); 
    transform: perspective(400px) rotateX(10deg);
  }
  100% { 
    -ms-transform: perspective(400px) rotateX(0deg); 
    transform: perspective(400px) rotateX(0deg);
  }
}

编辑： IE 需要 -ms-transform，所以我添加了它。

【讨论】：