CSS - Typewriter animation with border-right thinning

user_4569926 0
Viewed 133

In this example, I use two images aligned vertically and a text below that has its message appear from left to right with a border-right. Everything works just fine but as I reload the page again and again, I have a feeling that the border is not always 4px but gets thinned sometimes through the animation. Does it happen indeed and how could I fix it? Thanks

.d1 {
      background-color: #333;
      padding: 2%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    /* DEMO-SPECIFIC STYLES */
    .typewriter {
      color: #fff;
      font-family: "Electrolize";
      font-size: 25px;
      overflow: hidden; /* Ensures the content is not revealed until the animation */
      
      white-space: nowrap; /* Keeps the content on a single line */
    
      letter-spacing: .15em; /* Adjust as needed */
      animation-delay: 1s;
      animation-duration: 6s;
      animation-fill-mode: both;
      animation-name: spin1;
    }
    
    @keyframes spin1 {
     0%  {max-width: 0px; border-right: 0px;}
     1%  {max-width: 0px; border-right: 4px solid #7CDD26;}
     99% {max-width: 100%; border-right: 4px solid #7CDD26;}
        100% {max-width: 100%; border-right: none}
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet'>
    <title>
    Test
    </title>
    </head>
    <body>
    <div class="d1">
     <img src="https://www.gravatar.com/avatar/4581a99fa5793feaeff38d989a1524c6?s=48&d=identicon&r=PG">
     <img src="https://www.gravatar.com/avatar/4581a99fa5793feaeff38d989a1524c6?s=48&d=identicon&r=PG">
     <div class="typewriter">TEST1 TEST2 TEST3 TEST4 TEST5 TEST6</div>
    </div>    
    </body>
    </html>

css-animations css
3 Answers

You are right, your border disappears throughout the animation. I guess the problem is that the jump to none happens to early. You can fix it easily by changing the 99% part to 99% {max-width: 100%; border-right: 4px solid #7CDD26;}. This ensures that the border persists till the end and it will disappear when reaching 100%, because the animation can't interpolate it.

From mdn:

Properties that aren't specified in every keyframe are interpolated if possible — properties that can't be interpolated are dropped from the animation

.d1 {
      background-color: #333;
      padding: 2%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    /* DEMO-SPECIFIC STYLES */
    .typewriter {
      color: #fff;
      font-family: "Electrolize";
      font-size: 25px;
      overflow: hidden; /* Ensures the content is not revealed until the animation */
      
      white-space: nowrap; /* Keeps the content on a single line */
    
      letter-spacing: .15em; /* Adjust as needed */
      animation-delay: 1s;
      animation-duration: 6s;
      animation-fill-mode: both;
      animation-name: spin1;
    }
    
    @keyframes spin1 {
     0%  {max-width: 0px; border-right: 0px;}
     1%  {max-width: 0px; border-right: 4px solid #7CDD26;}
     99% {max-width: 100%; border-right: 4px solid #7CDD26;}
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet'>
    <title>
    Test
    </title>
    </head>
    <body>
    <div class="d1">
     <img src="https://www.gravatar.com/avatar/4581a99fa5793feaeff38d989a1524c6?s=48&d=identicon&r=PG">
     <img src="https://www.gravatar.com/avatar/4581a99fa5793feaeff38d989a1524c6?s=48&d=identicon&r=PG">
     <div class="typewriter">TEST1 TEST2 TEST3 TEST4 TEST5 TEST6</div>
    </div>    
    </body>
    </html>

user_74908710

Here's how you can solve the problem:

@keyframes spin1 {
        0%  {max-width: 0px; border-right: 0px;}
        1%  {max-width: 0px; border-right: 40px solid #7CDD26;}
        99% {max-width: 100%; border-right: 40px;}
        100% {max-width: 100%; border-right: none;}
    }

(I put 40px on the border just to let you see that it doesn't get thinned. you can use 40px in your example to see the difference) 

.d1 {
      background-color: #333;
      padding: 2%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    /* DEMO-SPECIFIC STYLES */
    .typewriter {
      color: #fff;
      font-family: "Electrolize";
      font-size: 25px;
      overflow: hidden; /* Ensures the content is not revealed until the animation */
      
      white-space: nowrap; /* Keeps the content on a single line */
    
      letter-spacing: .15em; /* Adjust as needed */
      animation-delay: 1s;
      animation-duration: 6s;
      animation-fill-mode: both;
      animation-name: spin1;
    }
    
    @keyframes spin1 {
     0%  {max-width: 0px; border-right: 0px;}
     1%  {max-width: 0px; border-right: 40px solid #7CDD26;}
     99% {max-width: 100%; border-right: 40px;}
      100% {max-width: 100%; border-right: none;}
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet'>
    <title>
    Test
    </title>
    </head>
    <body>
    <div class="d1">
     <img src="https://www.gravatar.com/avatar/4581a99fa5793feaeff38d989a1524c6?s=48&d=identicon&r=PG">
     <img src="https://www.gravatar.com/avatar/4581a99fa5793feaeff38d989a1524c6?s=48&d=identicon&r=PG">
     <div class="typewriter">TEST1 TEST2 TEST3 TEST4 TEST5 TEST6</div>
    </div>    
    </body>
    </html>

user_71342090

Can you try;

@keyframes spin1 {
    0%  {max-width: 0px; border: 0px; border-right: 0px;}
    1%  {max-width: 0px; border: 0px; border-right: 4px solid #7CDD26;}
    99% {max-width: 100%; border: 0px; border-right: 4px solid #7CDD26;}
    100% {max-width: 100%; border: 0px; border-right: none}
}

Or I have one more solution;

@keyframes spin1 {
    0%  {max-width: 0px; border: 0px; border-right: 0px;}
    1%  {max-width: 0px; border: 0px; border-right: 4px solid #7CDD26;}
    99% {max-width: 100%; border: 0px; border-right: 4px solid #7CDD26;}
    100% {max-width: 100%; border: 0px; border-right: 4px solid #333}
}
user_4840820
Related