CSS動畫不工作

我有一個簡單的CSS動畫文本褪色：CSS動畫不工作

#title{ 
    animation: text 2s; 
    -webkit-animation: text 2s; 
    -moz-animation: text 2s; 
    -o-animation: text 2s; 
    font-family: 'Lato300', sans-serif; 
    height: 115px; 
    position: absolute; 
    bottom: -10px; 
    left: 0; 
    right: 0; 
    margin-bottom: auto; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 

@keyframes text{ 
    0% {display: none;} 
    100% {display: inline;} 
} 

@-moz-keyframes text{ 
    0% {display: none;} 
    100% {display: inline;} 
} 

@-webkit-keyframes text{ 
    0% {display: none;} 
    100% {display: inline;} 
} 

@-o-keyframes text{ 
     0% {display: none;} 
    100% {display: inline;} 
}

的HTML：

<div id="title"><h1>Text goes here</h1></div>

出於某種原因，該動畫不能播放。有誰知道爲什麼？（我保留所有代碼加上其他事情正在導致此問題）

來源

2013-04-06 william44isme

W hy沒有jquery？因爲css動畫不支持所有瀏覽器？ – Dolo 2013-04-06 07:45:36

不，它支持在我正在使用的Safari中。瀏覽器老舊的用戶習慣於網頁看起來有點過時和過時。 – william44isme 2013-04-06 07:49:23

您將無法動畫display屬性。然而，你可以通過添加

display:block

到跨度我試圖轉型的opacity

@-webkit-keyframes text { 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
}

http://jsfiddle.net/5FCZA/

來源

2013-04-06 07:47:17 dfsq

謝謝！雖然我以爲你可以使用'display'，它可以在轉換中使用...... – william44isme 2013-04-06 07:48:30

'display'不能動畫。它使得sence因爲一個元素不能被部分隱藏*。它可以在頁面上顯示（'display：block，inline-block'）或不顯示（'display：none'）。 – dfsq 2013-04-06 07:52:55

當然！這是完全合理的，謝謝你的信息。 – william44isme 2013-04-06 08:24:07

shake 
@-webkit-keyframes text { 
    0%, 100% {-webkit-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} 
} 

or rotate 
@-webkit-keyframes text { 
    0% {-webkit-transform: scale(1);} 
    10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 
    30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 
    40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 
    100% {-webkit-transform: scale(1) rotate(0);} 
}

來源

2013-04-06 08:00:51

對於任何人在將來遇到類似的問題，我解決了這個動畫

來源

2016-06-09 16:02:48

CSS動畫不工作

回答

相關問題