我有一个简单的 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>
由于某种原因,动画没有播放。有谁知道为什么? (我保留了所有代码以防其他原因导致问题)
最佳答案
您将无法为 display
属性设置动画。但是,您可以转换 opacity
@-webkit-keyframes text {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
关于html - CSS 动画不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15848344/