Question

我通过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应用于伪元素，并且注意到宽度比您预期的要宽（例如20px齿轮为50像素宽度），请使用text-indent: 0;。如果您对代码执行其他操作，请进入开发人员工具并开始取消选中已应用的属性/值对，直到问题解决为止。

Answer 1

您可以使用它，尝试应用显示：内联阻止它将起作用。

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

Answer 2

我做了一些修改并创建了一支笔，请检查

Animation on hover

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

2 个答案: