CSS - Анимация пишущей машинки с прореживанием границы справа - PullRequest
Новая
       4

CSS - Анимация пишущей машинки с прореживанием границы справа

3 голосов
/ 06 мая 2020

В этом примере я использую два изображения, выровненных по вертикали, и текст ниже, сообщение которого отображается слева направо с border-right. Все работает нормально, но когда я перезагружаю страницу снова и снова, у меня возникает ощущение, что border не всегда 4px, но иногда становится более тонким из-за анимации. Это действительно происходит и как я могу это исправить? Спасибо 

.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>

Ответы [ 3 ]

3 голосов
/ 06 мая 2020

Вы правы, ваша граница исчезает на протяжении всей анимации. Думаю, проблема в том, что переход к нулевому уровню происходит слишком рано. Вы можете легко исправить это, изменив часть 99% на 99% {max-width: 100%; border-right: 4px solid #7CDD26;}. Это гарантирует, что граница сохранится до конца и исчезнет при достижении 100%, потому что анимация не может ее интерполировать.

From mdn:

Свойства, которые не указаны в каждом ключевом кадре, по возможности интерполируются - свойства, которые нельзя интерполировать, удаляются из анимации 

.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>
1 голос
/ 06 мая 2020

Вот как вы можете решить эту проблему: 

@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;}
    }

(Я поставил 40px на границу, чтобы вы видели, что она не истончается. Вы можете использовать 40px в своем пример, чтобы увидеть разницу) 

.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>
0 голосов
/ 15 мая 2020

Можете попробовать; 

@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}
}

Или у меня есть еще одно решение; 

@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}
}
...