gpt4 book ai didi

html - CSS 动画不工作

转载 作者:行者123 更新时间:2023-11-28 18:25:39 25 4
gpt4 key购买 nike

我有一个简单的 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;
}
}

http://jsfiddle.net/5FCZA/

关于html - CSS 动画不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15848344/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com