是否可以为 Fontastic 自定义图标设置动画？

Question

我想做什么

我使用 Fontastic 制作了自定义图标（例如 icon-plus-circle），并且我一直在尝试为它们制作动画。当我将鼠标悬停在 icon-plus-circle 上时，我希望它变大。我尝试使用 font 来做到这一点，但没有成功。

我的问题是：可以为自定义图标设置动画吗？

如果有人可以帮助我制作这些自定义图标的动画，将不胜感激！

我的代码

HTML

<div class="student-row">
    <div class="student-box student-box-add">
        <button type="button" class="icon-plus-circle" aria-label="Add student"></button>
    </div>
</div>

CSS

.icon-plus-circle {
    color: #02C8A7;
    transition-property: font;
        -webkit-transition-property: font;
        -moz-transition-property: font;
        -o-transition-property: font;
    transition-duration: 0.5s;
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transition-timing-function: ease-in-out;
        -o-transition-timing-function: ease-in-out;
}

icon-plus-circle:hover{
    font-size: 5em;
}

JSFiddle

Answer 1

您的 css class 悬停时未激活的原因是您忘记在 class 前放置一个句点。

所以这个：

    icon-plus-circle:hover{
      font-size: 5em;
}

应该是这样的：

   .icon-plus-circle:hover{
      font-size: 5em;
}

我在这个js里给你修好了-fiddle!

https://jsfiddle.net/uthvam65/

是否可以为 Fontastic 自定义图标设置动画？

Is it possible to animate Fontastic custom icon?

css

animation

fontastic

我想做什么

我的代码