The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Animation - Pause an infinite loop? - HTML
James432213
post 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}
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
James432213
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th November 2019 - 06:54 PM