анимация текста CSS не останавливается - PullRequest
Новая
       6

анимация текста CSS не останавливается

0 голосов
/ 08 января 2019

Я использую простую вертикальную анимацию прокрутки текста css сверху вниз и хочу, чтобы она остановилась на последнем слове ключевого кадра (все). Я добавил 'forward' 'animation-fill-mode, но ничего не появляется после однократного воспроизведения. Код: 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>

Ответы [ 2 ]

0 голосов
/ 08 января 2019

Вы можете добавить еще одну анимацию 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>

Проверьте это здесь

0 голосов
/ 08 января 2019

Может быть, вам нужно создать анимацию на последний промежуток времени: https://codepen.io/anon/pen/KbBpqM

и использование:

animation-iteration-count: 1

...