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

Question

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

Answer 1

绝对可以，你可以尝试结合CSS关键帧的SVG精灵表;

为动画的所有帧创建一个SVG文件，并将其作为所需元素的背景（在我们的例子中是一个锚元素，让我们用svg类名称对它进行分析）： / p>

a.svg {
    background-image: url(lock.svg);
} 

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

a.svg {
    width: 1200%;
    height: 100%;
} 

现在你必须将它包装在一个剪切容器中以隐藏所有额外的宽度，所以把它放在另一个元素中，用绝对尺寸咕噜咕噜，并将它的overflow属性设置为hidden，比方说，像这样：

<div class="clip">
    <a class="svg" href="#"></a>
</div>

.clip {
    overflow: hidden;
    width: 50px;
    height: 50px;
}

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

@-webkit-keyframes lock {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(-100%, 0, 0); }
}

根据我们SVG精灵表中的帧数逐步使用它：

a.svg {
    -webkit-animation: lock 1s steps(12, end);
} 

等待！让我们回到这里（没有双关语），因为我们需要在悬停上激活动画。我们使用:hover状态的CSS转换来做到这一点。好吧，删除最后一条规则，然后执行以下操作：

a.svg {
    -webkit-transition: -webkit-animation;
}
a.svg:hover {
    -webkit-animation: lock 1s steps(12, end);
}

注释

• 这是从Veljko Sekelj's magnificent post无耻地借来的，引入了这种技巧。
• 属性是面向Webkit的，通过Webkit驱动的浏览器进行测试。这也许可以在Gecko中实现。
• 这适用于任何容器尺寸，因为我们处理矢量图形，而我们的背景载体是柔性布局，并且适合其容器的尺寸。
• 还有一些工作要做，因为我们还需要在锁定和解锁之间切换状态，这里没有介绍（尚未）。我认为我们可以反向运行动画。

---

我将很快更新这篇文章以包含一个实时工作演示，但这应该让您在您正在寻找的东西上有一个良好的开端。来吧，阅读Veljko Sekelj的帖子，玩代码，扭转它，转动它，去berzerk，男人。

Answer 2

当然可以。我尝试通过利用CSS3旋转与transform-origin相结合。在下面的示例中，我只是在要悬停的动画部分上设置以下值。

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

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

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

Answer 3

女巫css动画，你不能，但看到我的伎俩：

使用:hover您可以更改背景图片 例如：

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

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