html - 小屏幕上的文本动画故障

Question

查看以下代码笔:https://codepen.io/codeams/pen/Ksbcz , 我注意到如果你缩小窗口动画会出现故障(即文本在扩大字母间距时换行)。

h1 letter-spacing animation

body, h1{
  margin: 0;
  padding: 0;
}

body{
  width: 100%;
  height: 100%;
  background: #30252E;
  color: #f0f0f0;
}

h1{
  width: 100%;
  height: 42px;
  position: absolute;
  top: calc(50% - 21px);
  left: 0;
  text-transform: uppercase;
  text-align: center;
  font: 300  #{42px}/#{1} 'Open sans condensed', sans-serif;

  opacity: 0;
  animation: in 3s ease-out forwards infinite;
  animation-delay: 1s;
}

@keyframes in{
  0%{
    letter-spacing: -17px;
    opacity: 0;
  }
  30%{
    letter-spacing: 4px;
    opacity: 1;
  }
  100%{
    letter-spacing: 4px;
    opacity: 1;
  }
}

我该怎么做才能根据屏幕尺寸自行拆分单词并执行适当的动画？

Answer 1

你可以放置一个 <span>在文本和集合之间 display:block对于 span使用媒体查询以所需的屏幕分辨率显示。

body, h1{
  margin: 0;
  padding: 0;
}

body{
  width: 100%;
  height: 100%;
  background: #30252E;
  color: #f0f0f0;
}

h1{
  width: 100%;
  height: 42px;
  position: absolute;
  top: calc(50% - 21px);
  left: 0;
  text-transform: uppercase;
  text-align: center;
  font: 300  #{42px}/#{1} 'Open sans condensed', sans-serif;

  opacity: 0;
  animation: in 3s ease-out forwards infinite;
  animation-delay: 1s;
}

@keyframes in{
  0%{
    letter-spacing: -17px;
    opacity: 0;
  }
  30%{
    letter-spacing: 4px;
    opacity: 1;
  }
  100%{
    letter-spacing: 4px;
    opacity: 1;
  }
}


@media only screen and (max-width: 600px) {
  span{
    display:block; /*Will break the text to next line at screen size 600px*/
  }
}

<h1> letter-spacing<span></span> animation</h1>