CSS - Анимация пишущей машинки, ширина равна содержанию - PullRequest
Новая
       3

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

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

В этом примере у меня есть 2 изображения, выровненных по вертикали, и текст, который я хотел бы разместить слева направо с правой границей. Но в ключевых кадрах я не знаю, какие значения установить в width, если это свойство следует использовать. Я не хочу, чтобы последний div имел width больше, чем его содержимое. Последние значения 400px и 100% точно неверны, но какие значения я должен использовать, чтобы он всегда соответствовал его содержимому? Я мог бы измерить точные пиксели и использовать это значение, но ширина div могла измениться. 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet'>
    <title>
    Test
    </title>
    <style>
    .d1 {
      background-color: #333;
      padding: 2%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    /* DEMO-SPECIFIC STYLES */
    .typewriter {
      background-color: rgba(0, 0, 0, 0.5);
      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: 5s;
      animation-fill-mode: both;
      animation-name: spin1;
    }
    
    @keyframes spin1 {
    	0% {width:0px; border-right:0px;}
    	1% {width:0px; border-right:4px solid #7CDD26;}
    	99% {width:400px; border-right:4px solid #7CDD26;}
    	100% {width:100%; border-right:0px;}
    }
    </style>
    </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 Ответ

1 голос
/ 06 мая 2020

Анимировать max-width вместо ширины 

.d1 {
  background-color: #333;
  padding: 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* DEMO-SPECIFIC STYLES */

.typewriter {
  background-color: rgba(0, 0, 0, 0.5);
  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: 5s;
  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: 0px;
  }
}
<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>
...