Question

我正在制作一个非常简单的动画，其中我的字体在很短的时间内从正常变为倾斜。它适用于Chrome，但Safari和Firefox不合作。在互联网上广泛搜索得到答案，没有任何工作！我已经包含了webkit前缀，甚至尝试按名称，持续时间等分隔属性。

我在两台独立的计算机上使用较旧版本的Safari。首先是2012年Macbook Pro上的Safari 6.2（OS X 10.8.5）。其次是Safari 9在27“iMac（El Capitan）上运行。

就像我说的，它适用于Chrome（旧计算机和新计算机），但我似乎无法想象其他浏览器。我甚至尝试将字体更改为Times并让动画从正常变为斜体......仍然没有。

请帮帮我！这让我很难过。

这是我的HTML：

<div class="body">
<span id="first">One</span>, <span id="second">Two</span>.</span>
</div>

CSS：

.body {
  font-family: "Arial Rounded MT Bold";
  font-size: 9em;
  line-height: 1em;
  letter-spacing: -3px;
  font-kerning: normal;
}

@-webkit-keyframes shear {
    0% {font-style: normal;}
    100% {font-style: oblique;}
}

@-moz-keyframes shear {
    0% {font-style: normal;}
    100% {font-style: oblique;}
}

@-o-keyframes shear {
    0% {font-style: normal;}
    100% {font-style: oblique;}
}

@keyframes shear {
    0% {font-style: normal;}
    100% {font-style: oblique;}
}

#first {
  -webkit-animation: shear 6s 1;
  -moz-animation: shear 6s 1;
  -o-animation: shear 6s 1;
  animation: shear 6s 1;
}

#second {
  -webkit-animation: shear 9s 2;
  -moz-animation: shear 9s 2;
  -o-animation: shear 9s 2;
  animation: shear 9s 2;
}

Answer 1

font-style技术上是not animatable。参考：https://developer.mozilla.org/en/docs/Web/CSS/font-style

它在某些浏览器中运行的事实简直就是幸运。您可以尝试使用transform: skewX(-10deg)伪装它并将角度调整为适合您的角度。

以下是http://codepen.io/t3hpwninat0r/pen/jqZEWd

的示例

点击css框中的“查看已编辑”以查看供应商前缀

CSS字体样式动画拒绝在Safari和Firefox中工作

1 个答案: