CODEWITHSUNDEEP
csscss-animations
John O'Connell
John O'Connell

Reputation: 3

css text animation not stopping

I'm using a simple top-to-bottom vertical css text scroll animation and want it to stop on the last keyframe word (everyone). I've added the 'forwards' animation-fill-mode but nothing appears after it plays through once. Code: 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>

Upvotes: 0

Views: 146

Answers (2)

Nimitt Shah
Nimitt Shah

Reputation: 4587

You can add one more animation topToMiddle.

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

and add it to .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>

Test it here

Upvotes: 1

rflmyk
rflmyk

Reputation: 569

Maybe you need create a animation to last span like that: https://codepen.io/anon/pen/KbBpqM

and use:

animation-iteration-count: 1

Upvotes: 1

Related Questions