CSS3-在类和类上运行动画：悬停？

以下内容既适用于

#spin

，也适用于悬停时的

#spin

：

#spin, #spin:hover {
    position:fixed;
    top:2%;
    left:0%;
    -webkit-animation-name: spinnerRotate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

但是，它们放在一起时不起作用。我尝试在页面加载时运行动画，然后在悬停时再次运行。它只在页面加载时工作，为什么这里没有应用

：hover

旋转？你知道怎么用css来修复它吗

---

因为hover知道动画已经执行。必须将其定义为另一个动画。您可以运行下面的代码段或在更新的

@-webkit关键帧喷丝头旋转
{
从{-webkit变换：旋转（0度）；}
到{-webkit变换：旋转（360度）；}
}
@-webkit关键帧喷丝头旋转2
{
从{-webkit变换：旋转（0度）；}
到{-webkit变换：旋转（360度）；}
}
#旋转{
位置：固定；
顶部：100px；
左：100px；
-webkit动画名称：spinnerRotate；
-webkit动画持续时间：1s；
-webkit动画迭代计数：1；
-webkit动画计时功能：线性；
}
#旋转：悬停{
-webkit动画名称：spinnerRotate2；
-webkit动画持续时间：1s；
-webkit动画迭代计数：1；
-webkit动画计时功能：线性；
}

---

因为hover知道动画已经执行。必须将其定义为另一个动画。您可以运行下面的代码段或在更新的

@-webkit关键帧喷丝头旋转
{
从{-webkit变换：旋转（0度）；}
到{-webkit变换：旋转（360度）；}
}
@-webkit关键帧喷丝头旋转2
{
从{-webkit变换：旋转（0度）；}
到{-webkit变换：旋转（360度）；}
}
#旋转{
位置：固定；
顶部：100px；
左：100px；
-webkit动画名称：spinnerRotate；
-webkit动画持续时间：1s；
-webkit动画迭代计数：1；
-webkit动画计时功能：线性；
}
#旋转：悬停{
-webkit动画名称：spinnerRotate2；
-webkit动画持续时间：1s；
-webkit动画迭代计数：1；
-webkit动画计时功能：线性；
}

---

请尝试样式代码：

@-webkit关键帧喷丝头旋转
{
从{-webkit变换：旋转（0度）；}
到{-webkit变换：旋转（360度）；}
}
#旋转{
位置：固定；
顶部：100px；
左：100px；
-webkit动画名称：spinnerRotate；
-webkit动画持续时间：1s；
-webkit动画迭代计数：1；
-webkit动画计时功能：线性；
}
#旋转：悬停img{
-webkit动画名称：spinnerRotate；
-webkit动画持续时间：1s；
-webkit动画迭代计数：1；
-webkit动画计时功能：线性；
}

请尝试样式代码：

@-webkit关键帧喷丝头旋转
{
从{-webkit变换：旋转（0度）；}
到{-webkit变换：旋转（360度）；}
}
#旋转{
位置：固定；
顶部：100px；
左：100px；
-webkit动画名称：spinnerRotate；
-webkit动画持续时间：1s；
-webkit动画迭代计数：1；
-webkit动画计时功能：线性；
}
#旋转：悬停img{
-webkit动画名称：spinnerRotate；
-webkit动画持续时间：1s；
-webkit动画迭代计数：1；
-webkit动画计时功能：线性；
}

Hmmm。。。它会在加载时旋转，但当你在上面悬停时，它似乎会旋转，这很好，但当移动鼠标时，它似乎会再次旋转。你知道如何让悬停旋转，而不是在鼠标移出时旋转吗？恐怕这不可能只使用CSS。从悬停位置移入/移出时，状态重置。显然，只有借助一些Javascript才能实现这种行为。读了这篇文章，我明白了，我知道我可以使用javascript，但我认为我接受的答案是可以接受的，只使用css。感谢您的回答/链接：）如果您决定使用JavaScripthmm，这可能会有所帮助。。。它会在加载时旋转，但当你在上面悬停时，它似乎会旋转，这很好，但当移动鼠标时，它似乎会再次旋转。你知道如何让悬停旋转，而不是在鼠标移出时旋转吗？恐怕这不可能只使用CSS。从悬停位置移入/移出时，状态重置。显然，只有借助一些Javascript才能实现这种行为。读了这篇文章，我明白了，我知道我可以使用javascript，但我认为我接受的答案是可以接受的，只使用css。感谢您的回答/链接：）如果您决定使用Javascript，这可能会有所帮助