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

时间:2019-05-02 06:10:33

标签: css css-animations

我通过Unicode有一个齿轮图标,我正在尝试使其在focushover事件上旋转。

@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;。如果您对代码执行其他操作,请进入开发人员工具并开始取消选中已应用的属性/值对,直到问题解决为止。

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

Animation on hover