滑入后设置文本位置
Set position of text after slide-in
我有以下代码可以让文本滑入,但在滑过之后文本会向左移动。幻灯片结束后,如何让文本保持原样?
<style>
div.slide-left {
width: 100%;
overflow: hidden;
}
div.slide-left p {
animation: slide-left 5s;
font-size: 300%;
color: #000;
position: absolute;
top: 50px;
}
@keyframes slide-left {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 50%;
width: 100%;
}
}
</style>
<div class="slide-left">
<p>hello</p>
</div>
您需要使用animation-fill-mode: forwards
来保存最后的动画状态。由于没有指定animation-fill-mode,它使用class名称的默认属性,即resets/jumps到动画完成后指定的最高值。
<style>
div.slide-left {
width: 100%;
overflow: hidden;
}
div.slide-left p {
animation: slide-left 5s;
font-size: 300%;
color: #000;
position: absolute;
top: 50px;
animation-fill-mode: forwards;
}
@keyframes slide-left {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 50%;
width: 100%;
}
}
</style>
<div class="slide-left">
<p>hello</p>
</div>
我有以下代码可以让文本滑入,但在滑过之后文本会向左移动。幻灯片结束后,如何让文本保持原样?
<style>
div.slide-left {
width: 100%;
overflow: hidden;
}
div.slide-left p {
animation: slide-left 5s;
font-size: 300%;
color: #000;
position: absolute;
top: 50px;
}
@keyframes slide-left {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 50%;
width: 100%;
}
}
</style>
<div class="slide-left">
<p>hello</p>
</div>
您需要使用animation-fill-mode: forwards
来保存最后的动画状态。由于没有指定animation-fill-mode,它使用class名称的默认属性,即resets/jumps到动画完成后指定的最高值。
<style>
div.slide-left {
width: 100%;
overflow: hidden;
}
div.slide-left p {
animation: slide-left 5s;
font-size: 300%;
color: #000;
position: absolute;
top: 50px;
animation-fill-mode: forwards;
}
@keyframes slide-left {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 50%;
width: 100%;
}
}
</style>
<div class="slide-left">
<p>hello</p>
</div>