我正在使用来自 Reveal Text from center with CSS Animation 的代码从中心显示文本。 但是我想在动画结束后保持文本可见。现在,文本在动画之后消失。我是 css 动画的新手,所以我不确定正确的做法是什么。
CSS:
.text-div {
color:white;
text-align:center;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top:45%;
font-weight: bold;
}
.text-div:before {
left:0;
}
.text-div:after {
right:0;
}
.text-div:after,.text-div:before {
position:absolute;
content:"";
height:100%;
width:50%;
background:black;
animation: revealText 3s;
}
.content {
background:black;
height:200px;
width:200px;
position:relative;
}
@keyframes revealText {
0% {
width:50%
}
100% {
width:0%
}
}
html:
<div class="content">
<div class="text-div">
The subculture
</div>
</div>
最佳答案
将 animation-fill-mode:forwards
添加到 .text-div:after,.text-div:before
如下,
.text-div:after,.text-div:before {
position:absolute;
content:"";
height:100%;
width:50%;
background:black;
animation: revealText 3s;
animation-fill-mode:forwards; /*Add this*/
}
The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.
.text-div {
color:white;
text-align:center;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top:45%;
font-weight: bold;
}
.text-div:before {
left:0;
}
.text-div:after {
right:0;
}
.text-div:after,.text-div:before {
position:absolute;
content:"";
height:100%;
width:50%;
background:black;
animation: revealText 3s;
animation-fill-mode:forwards;
}
.content {
background:black;
height:200px;
width:200px;
position:relative;
}
@keyframes revealText {
0% {
width:50%
}
100% {
width:0%
}
}
<div class="content">
<div class="text-div">
The subculture
</div>
</div>
关于css - 使用 CSS 动画从中心显示文本并在末尾保持文本可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42955759/