CSS动画和生成的内容没有动画效果

Question

CSS动画和生成的内容没有动画效果

3

我有一个透过Unicode得到的齿轮图标，并尝试在focus和hover事件上使其旋转。

@keyframes spin
{
  0 {transform: rotate(0deg);}
  100% {transform: rotate(359deg);}
}

a[title*='important']::after {content: '\2699';}

a[title*='important']:hover::after
{
  animation: spin 5s infinite; 
  outline: #00f solid 2px;
}

<a href="#" title="important">link</a>

我添加了蓝色的outline来确认我选择正确。为什么CSS生成的内容不能动画化，如何解决？

我进行了一些测试，并发现了一些非常具有讽刺意味的结果！

IE11可以
Chrome 72失败。
Waterfox 56失败。
Firefox 66失败。
Safari 11失败。

有关使“懒汉”浏览器工作的建议？

更新

bijal的答案使用display: inline-block;成功地将齿轮动画化，但它会在一个圆圈中移动而不是简单地旋转。

如果你为伪元素应用了background-color并且注意到宽度比预期的宽（例如，20像素的齿轮的50像素宽度），请使用text-indent: 0;。如果你对代码做了其他操作，请进入开发者工具并开始取消选中已应用的属性/值对，直到问题被揭示出来。

- John

也许这篇文章可以帮到你：https://css-tricks.com/transitions-and-animations-on-css-generated-content/ - Sfili_81

@Sfili_81 不，动画不是在CSS生成的内容上，页面只是声称。我更新了我的问题，现在我叹气并假设我需要找到一个解决方法，而这应该是普遍支持的。-_- - John

这里有一个相关的问题，您可以通过调整行高来实现完美旋转：https://dev59.com/sLHma4cB1Zd3GeqPRdJR#54670339 - Temani Afif

2个回答

2

我做了一些更改并创建了一个代码片段，请检查

悬停动画

注：Original Answer翻译成“最初的回答”在此上下文中没有意义，因此未进行翻译。

- Amarjit Singh

是的，有一个问题，元素会出现一些奇怪的东西...您的建议似乎可以解决这个问题，不过给我一点时间，我会看看我们如何调整它，以便在仍然旋转它的同时将齿轮保持在固定位置。 :-) - John

如果你有一个 background-color 并且注意到有很多空间（例如，20px的齿轮宽度为50px），请使用以下代码：text-indent: 0 !important;。所以你的建议帮助了我的思路，谢谢！ - John

我使用了 line-height，它产生了一些影响。你可以再次检查链接。 - Amarjit Singh

另外，为了浏览器兼容性，请使用“-webkit-”、“-moz-”前缀。 - Amarjit Singh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bijal Patel · Accepted Answer

你可以尝试使用display: inline-block，它会起作用。"最初的回答"。

    a[title*='important']:hover::after{
      display: inline-block;
      animation: spin 5s infinite; 
      outline: #00f solid 2px;
    }