CSS 斜线动画

Question

我正在尝试用 CSS 制作一个简单的文本动画。 文本应该慢慢改变 font-style 属性的值。

我尝试过这样的事情：

 h1 {
                animation-duration: 3s;
                animation-name: slidein;
            }
            @keyframes slidein {
                from {
                    font-style: oblique 30deg;
                }
                to {
                    font-style: oblique 0deg;
                }
            }

Answer 1

我们无法为

font-style

属性设置动画。相反，我们可以通过倾斜来模仿相同的效果，如下所示：

h1 {
  animation: slidein 3s forwards;
}

@keyframes slidein {
  from {
    transform: skew(0deg); /* Initial state */
  }
  to {
    transform: skew(-30deg); /* Skew to create an oblique-like effect */
  }
}

<h1>text</h1>

而且

font-style

不能有

deg

值，据我所知...