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的{{1}}设置为所需的屏幕分辨率。

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*/
  }
}

Answer 2

字母间隔不会以60fps进行动画处理，因此在进行动画处理时不会显得像黄油一样平滑。为您提供流畅动画（60fps）的CSS属性是：

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

/*scale*/
transform: scale(n)

/*rotation*/
transform: rotate(deg)

/*opacity*/
opacity: 0 though to 1

任何其他值都会以一种或另一种形式出现“垃圾”。人们尝试使用其他属性制作动画的大多数东西都可以通过60fps的属性来实现。

保罗

https://inset.agency

小屏幕上的文字动画故障

2 个答案: