我有以下两段代码
.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。但这对我不起作用。
那个页面上也有一个 fiddle ,http://jsfiddle.net/EghZs/ .它只适用于我的 chrome。而不是在任何其他浏览器上。
这是我浏览器的问题吗?或者这是代码的问题?
最佳答案
看起来您没有在@级别指定足够的浏览器,而且在您的@-moz block 中,根据Mozilla's current documentation.,转换应该只是“转换”而不是“-moz-转换” (由于旧版本的 Firefox 仍然使用 -moz-transform,您可能需要巧妙地使用 @support block 来同时管理旧版本和新版本的 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,所以我将其添加进去。
关于html - CSS Transitions 根本不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20866089/