Posted by: James432213 Mar 19 2019, 07:51 PM
Is it possible to pause an animation at the end of the animation's last frame even though initially the animation-iteration-count: is set to infinite?
Setting the last frame to animation-play-state: paused; or animation-iteration-count: 1; didn't work.
Thank you
CODE
#TheThermalWonderland{
font-size: 60px;
text-align: center;
position: absolute;
top: 80px;
left:-100px;
color: black;
visibility: hidden;
-webkit-animation-name: textMoveS5T2;
-webkit-animation-duration: 30s;
animation-name: textMoveS5T2;
animation-duration: 30s;
animation-iteration-count: infinite;
}
@keyframes textMoveS5T2 {
0% { top: 80px; left:-100px;visibility: hidden; }
5% { top: 80px; left:-100px;visibility: hidden; }
10% { top: 80px; left:-100px;visibility: hidden; }
15% { top: 80px; left:-100px;visibility: hidden;}
20% { top: 80px; left:-100px;visibility: hidden; }
25% { top: 80px; left:-100px;visibility: hidden; }
30% { top: 80px; left:-100px;visibility: hidden; }
35% { top: 80px; left:-100px;visibility: hidden; }
40% { top: 80px; left:-100px;visibility: hidden;}
45% { top: 80px; left:-100px;visibility: hidden;}
50% { top: 80px; left:-100px;visibility: hidden;}
55% { top: 80px; left:-100px;visibility: hidden;}
57.5% { top: 80px; visibility: visible; }
60% { top: 80px; visibility: visible; }
62.5% { top: 80px; visibility: visible; }
65% { top: 80px; visibility: visible; }
67.5% { top: 80px; visibility: visible; }
70% { top: 80px; left:725px;visibility: visible; color: black; font-size:60px;}
72.5% { top: 80px; left:725px;visibility: visible; color: #ff0000;}
75% { top: 80px; left:725px;visibility: visible; color: #66ccff;}
77.5% { top: 80px; left:725px;visibility: visible; color: #ff0000;}
80% { top: 80px; left:725px;visibility: visible; color: #66ccff;}
82.5% { top: 80px; left:725px;visibility: visible; color: #ff0000;}
85% { top: 80px; left:725px;visibility: visible; color: #66ccff; font-size:40px;}
87.5% { top: 80px; left:725px;visibility: visible; color: #ff0000;}
90% { top: 80px; left:725px;visibility: visible; color: #66ccff;}
92.5% { top: 80px; left:725px;visibility: visible; color: #ff0000;}
95% { top: 80px; left:725px;visibility: visible; color: #66ccff;}
97.5% { top: 80px; left:725px;visibility: visible; color: #ff0000;}
100%{ top: 80px; left:725px;visibility: visible; color: #66ccff; font-size:60px; animation-iteration-count:1}
}
@-webkit-keyframes textMoveS5T2 {
0% { top: 80px; left:-100px;visibility: hidden; }
5% { top: 80px; left:-100px;visibility: hidden; }
10% { top: 80px; left:-100px;visibility: hidden; }
15% { top: 80px; left:-100px;visibility: hidden;}
20% { top: 80px; left:-100px;visibility: hidden; }
25% { top: 80px; left:-100px;visibility: hidden; }
30% { top: 80px; left:-100px;visibility: hidden; }
35% { top: 80px; left:-100px;visibility: hidden; }
40% { top: 80px; left:-100px;visibility: hidden;}
45% { top: 80px; left:-100px;visibility: hidden;}
50% { top: 80px; left:-100px;visibility: hidden;}
55% { top: 80px; left:-100px;visibility: hidden;}
57.5% { top: 80px; visibility: visible; }
60% { top: 80px; visibility: visible; }
62.5% { top: 80px; visibility: visible; }
65% { top: 80px; visibility: visible; }
67.5% { top: 80px; visibility: visible; }
70% { top: 80px; left:725px;visibility: visible; color: black; font-size:60px;}
72.5% { top: 80px; left:725px;visibility: visible; color: #ff0000;}
75% { top: 80px; left:725px;visibility: visible; color: #66ccff;}
77.5% { top: 80px; left:725px;visibility: visible; color: #ff0000;}
80% { top: 80px; left:725px;visibility: visible; color: #66ccff;}
82.5% { top: 80px; left:725px;visibility: visible; color: #ff0000;}
85% { top: 80px; left:725px;visibility: visible; color: #66ccff; font-size:40px;}
87.5% { top: 80px; left:725px;visibility: visible; color: #ff0000;}
90% { top: 80px; left:725px;visibility: visible; color: #66ccff;}
92.5% { top: 80px; left:725px;visibility: visible; color: #ff0000;}
95% { top: 80px; left:725px;visibility: visible; color: #66ccff;}
97.5% { top: 80px; left:725px;visibility: visible; color: #ff0000;}
100%{ top: 80px; left:725px;visibility: visible; color: #66ccff; font-size:60px; animation-iteration-count: 1}
}
Posted by: James432213 Mar 19 2019, 08:47 PM
Don't worry I found a fix.
It may not make sense to you but given the context of the rest of my code I set the animation-iteration-count: to 1 and set the visibility to visible.