如何使用 CSS3 转换字体样式？

Question

我有一个单字标题，分为两半，用@keyframe 制作动画并在页面中间相遇。问题：在到达页面中间的适当位置后，我需要两半之一从常规转换为斜体。由于我不打算使标题可点击，因此使用悬停毫无意义。有没有办法在不求助于javascript的情况下做到这一点......？

Answer 1

由于 font-style不是一个可动画的属性，您可以使用倾斜转换。

h1 span {
  position: relative;
}
#title_part1 {
  animation: part1_move 2s;
}
#title_part2 {
  
  animation: part2_move 2s,part2_skew 4s;
  
  display: inline-block;
  -ms-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@keyframes part1_move {
  from {
    left: -100px;
  }
  to {
    left: 0;
  }
}


@keyframes part2_move {
  from {
    left: 100px;
    }
  to{
    left:0
  }
}

@keyframes part2_skew{
  from {
    transform:skewX(0);
    -ms-transform:skewX(0)
  }
  50%{
    transform:skewX(0);
    -ms-transform:skewX(0)
  }
  to{
    transform:skewX(-20deg);
    -ms-transform:skewX(-20deg)
  }
}

<h1>
  <span id="title_part1">The start and </span>
  <span id="title_part2">the end of my title </span>
</h1>

相关问题：

从普通文本平滑地淡化到斜体文本？

渐变斜体？