Question

我正在使用一个简单的从上到下的垂直CSS文本滚动动画，希望它停在最后一个关键帧词（每个人）上。我添加了“前进”动画填充模式，但是播放一次后什么也没有出现。代码：https://codepen.io/oconnellsail/pen/MZmgbo

    /*Vertical Sliding*/
.slidingVertical{
    display: inherit;

}
.slidingVertical span{
    animation: topToBottom 7.5s linear 0s 1 forwards;
    -ms-animation: topToBottom 7.5s linear 0s 1 forwards;
    -webkit-animation: topToBottom 7.5s linear 0s 1 forwards;
  color: #13b2cf;
    opacity: 0;
    overflow: hidden;
    position: absolute; 
}
.slidingVertical span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}


/*topToBottom Animation*/
@-moz-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: translateY(-50px); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateY(-50px); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: translateY(-50px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

<h1 class="sentence">
    <div class="slidingVertical">
      <span>Your struggling student</span>
      <span>Your child</span>
      <span>Everyone</span>
    </div>
<br>can be a math person.</h1>

Answer 1

也许您需要创建一个动画来持续这样的持续时间：https://codepen.io/anon/pen/KbBpqM

并使用：

animation-iteration-count: 1

Answer 2

您可以再添加一个动画topToMiddle。

@-webkit-keyframes topToMiddle{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateY(-50px); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    100% { opacity: 1; }
}

并将其添加到.slidingVertical span:nth-child(3){.... .... animation-name: topToMiddle;}

/*Vertical Sliding*/
.slidingVertical{
	display: inherit;
	
}
.slidingVertical span{
	animation: topToBottom 7.5s linear 0s 1 forwards;
	-ms-animation: topToBottom 7.5s linear 0s 1 forwards;
	-webkit-animation: topToBottom 7.5s linear 0s 1 forwards;
  color: #13b2cf;
	opacity: 0;
	overflow: hidden;
	position: absolute; 
}
.slidingVertical span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
  animation-name: topToMiddle;
}


@-webkit-keyframes topToMiddle{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: translateY(-50px); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	100% { opacity: 1; }
}
/*topToBottom Animation*/
@-moz-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: translateY(-50px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: translateY(-50px); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: translateY(-50px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(50px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

<h1 class="sentence">
    <div class="slidingVertical">
      <span>Your struggling student</span>
      <span>Your child</span>
      <span>Everyone</span>
    </div>
<br>can be a math person.</h1>

测试here

CSS文本动画没有停止

2 个答案: