Animation - Pause an infinite loop? - HTML |
Animation - Pause an infinite loop? - HTML |
James432213 |
Mar 19 2019, 07:51 PM
Post
#1
|
Group: Members Posts: 7 Joined: 16-March 19 Member No.: 26,853 |
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} } |
James432213 |
Mar 19 2019, 08:47 PM
Post
#2
|
Group: Members Posts: 7 Joined: 16-March 19 Member No.: 26,853 |
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. |
Lo-Fi Version | Time is now: 13th May 2024 - 01:59 AM |