Html 小屏幕上的文本动画小故障

查看以下代码笔：，我注意到如果缩小窗口（即，文本在扩大字母间距时换行），动画会出现小故障

---

我怎样才能从屏幕大小开始，自己分割单词并进行适当的动画制作呢？

字母间距不会以60帧/秒的速度进行动画制作，因此在动画制作时不会显得过于平滑。提供平滑动画（60fps）的CSS属性包括：

任何其他价值观都会受到某种形式的“jank”的影响。不过，人们尝试用其他属性制作动画的大部分内容都可以通过60fps属性来实现

保罗

您可以在文本之间放置一个

，并使用媒体查询将

span

的

显示：块设置为所需的屏幕分辨率


body，h1{
保证金：0；
填充：0；
}
身体{
宽度：100%；
身高：100%；
背景：#30252E；
颜色：#f0；
}
h1{
宽度：100%；
高度：42px；
位置：绝对位置；
顶部：钙（50%-21px）；
左：0；
文本转换：大写；
文本对齐：居中；
字体：300#{42px}/#{1}“开放无压缩”，无衬线；
不透明度：0；
动画：在3s内轻松前进无限；
动画延迟：1s；
}
@中的关键帧{
0%{
字母间距：-17px；
不透明度：0；
}
30%{
字母间距：4px；
不透明度：1；
}
100%{
字母间距：4px；
不透明度：1；
}
}
@仅介质屏幕和（最大宽度：600px）{
跨度{
display:block；/*将在屏幕大小为600px时将文本中断到下一行*/
}
}
字母间距动画
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;
  }
}

/*postion*/
transform: translate(value, value)

/*scale*/
transform: scale(n)

/*rotation*/
transform: rotate(deg)

/*opacity*/
opacity: 0 though to 1