CSS過渡根本不起作用

Question

我有以下兩個代碼

.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上完美運行。 但不適用於任何其他瀏覽器。

我在這里讀過其他問題，在這里碰到過 。 正如它建議的那樣，我不應該使用-moz -o -webkit。 但這對我沒有用。

該頁面上也有一個小提琴， http://jsfiddle.net/EghZs/ 。 它僅適用於我的Chrome。 而不是在任何其他瀏覽器上。

我的瀏覽器有問題嗎？ 還是這是代碼的問題？

Answer 1

看來您沒有在@級別上指定足夠的瀏覽器，而且在您的@ -moz塊中，根據Mozilla的當前文檔 ，轉換應該只是“ 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，所以我添加了它。