我有一个简单的 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>
由于某种原因,动画无法播放。有谁知道为什么?(我保留了所有代码以防其他原因导致问题)