如何用CSS实现font-style属性的文字倾斜过渡动画？

你的代码思路没问题，但可以通过调整参数让动画效果更贴合需求：

• 添加填充模式：默认动画结束后元素会恢复初始样式，加上animation-fill-mode: forwards可让元素保持动画结束后的状态。
• 可选循环播放：如果需要重复动画，可添加animation-iteration-count: infinite，搭配animation-direction: alternate还能实现来回往复的倾斜效果。
• 兼容性备选方案：现代浏览器已支持font-style: oblique <angle>语法，若要兼容旧版本，可使用transform: skew()作为替代（注：该方法是对元素整体几何变形，和字体原生倾斜有细微视觉差异）。

优化后的代码示例 #

h1 {
    animation-duration: 3s;
    animation-name: slidein;
    animation-fill-mode: forwards;
    /* 可选：开启无限循环+反向播放 */
    /* animation-iteration-count: infinite; */
    /* animation-direction: alternate; */
}

@keyframes slidein {
    from {
        font-style: oblique 30deg;
    }
    to {
        font-style: oblique 0deg;
    }
}

兼容性替代方案（transform实现） #

h1 {
    animation-duration: 3s;
    animation-name: skewText;
    animation-fill-mode: forwards;
}

@keyframes skewText {
    from {
        transform: skewX(15deg);
    }
    to {
        transform: skewX(0deg);
    }
}

内容的提问来源于stack exchange，提问作者Netscape Navigator