如何使用CSS为的图标设置动画？

是否可以使用CSS显示锁定图标（处于锁定状态），然后悬停，将其设置为解锁状态（如下所示）

---

巫婆css动画，你不能，但看看我的把戏：

使用

：悬停

可以更改背景图像 例如：

a {
    background: url(lock.png) no-repeat center center;
}
a:hover {
    background-image: url(unlock.gif);
}

---

unlock.gif是动画gif文件从锁定开始到解锁图像动画

绝对可能，您可以尝试将SVG精灵表与CSS关键帧合并

为动画的所有帧创建一个SVG文件，并将其作为所需元素的背景（在我们的示例中是锚元素，让我们用

SVG

classname来说明它）：

a.svg{
背景图像：url（lock.svg）；
} 

您还必须考虑SVG图像的纵横比，因此也要设置它，例如：

a.svg{
宽度：1200%；
身高：100%；
} 

现在，您必须将其包装在剪切容器中以隐藏所有额外宽度，因此将其放入另一个元素中，使用绝对尺寸呼出它，并将其

溢出

属性设置为

隐藏

，例如：

.clip{
溢出：隐藏；
宽度：50px；
高度：50px；
}

现在我们要声明要使用的关键帧变换，我们只是沿着X轴移动，所以：

@-webkit关键帧锁定{
来自{-webkit转换：translate3d（0,0,0）；}
到{-webkit转换：translate3d（-100%，0，0）；}
}

并根据SVG sprite表中的帧数分步骤使用它：

a.svg{
-webkit动画：锁定1s步骤（12，结束）；
} 

等等！让我们后退一步（没有双关语），因为我们需要在悬停上激活动画。我们通过

：hover

状态上的CSS转换来实现这一点。好吧，删除最后一条规则，改为执行以下操作：

a.svg{
-webkit转换：-webkit动画；
}
a、 svg：悬停{
-webkit动画：锁定1s步骤（12，结束）；
}

笔记

• 这都是无耻地借鉴，引进了这种技术
• 属性都是面向Webkit的，应使用Webkit驱动的浏览器进行测试。这可能也可以在壁虎身上实现
• 这将适用于任何大小的容器，因为我们正在处理矢量图形，我们的背景载体是柔性布局，将适合其容器的尺寸
• 还有一些工作要做，因为我们还需要在锁定和解锁之间切换状态，这里还没有介绍。我想我们可以反向运行动画

---

---

我将很快更新这篇文章，包括一个现场工作演示，但这应该给你一个领先的开始，你在寻找什么。继续阅读Veljko Sekelj的帖子，玩代码，扭曲代码，旋转代码，去berzerk，伙计。

当然可以。我尝试利用CSS3旋转和变换原点。在下面的示例中，我只是在要在悬停时设置动画的零件上设置以下值

transform: rotateY(-180deg);
transform-origin: 25px 0;

这只是一个例子（远非完美，但确实有效）。 如果您喜欢使用相同的逻辑，您可以使用两个图像，或者甚至尝试像我一样只使用CSS，但可能只使用一个元素

---

这是我的（仅限webkit，但适用于所有具有适当前缀的主流浏览器）。

我添加了一个类似的答案（css精灵），但我真的认为OP希望动画化，而不仅仅是翻转图像。（我删除了我的答案）。@Graeck我说悬停图像必须是动画的，很好，简单的解决方案，s***我真的为此发疯了（见我的答案）：）在大多数情况下，动画GIF是一种更实用的方法，但SVG确实具有不是光栅图形的优势，即它可以在高密度显示器上完美地缩放（这变得越来越普遍）。所以我给了+1。谢谢，我相信这是Veljko实验的最初目的-在显示器上无缝渲染。很棒的方法！+1