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动画不工作

回答

相关问题