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

Question

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

Answer 1

因为字体样式是not an animatable property ，您可以使用倾斜变换。

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>

相关问题:

Fade from normal text to italics text smoothly?

Gradual italics?