如何减小 animate.css 心跳放大尺寸答案

【问题标题】：How to reduce animate.css heartbeat enlarge size如何减小 animate.css 心跳放大尺寸
【发布时间】：2021-08-23 12:54:06
【问题描述】：

所以我正在使用 animate.css 为键盘设置动画，以显示要输入的键。目前我正在使用 animate__heartbeat 为要按下的键设置动画，但问题是动画使其溢出其他键，我想减小该大小。

这些是我在每个键上使用的类：

class="animate__animated animate__slow animate__infinite animate__heartBeat"

由于我是 animate.css 的新手，我不知道如何更改它在动画期间增加的大小，有没有办法在 css 中减小它？

【问题讨论】：

如果您不分享您的代码，我们将无能为力
没有与键相关的代码，它只是带有类的 div，我只想在 animate.css 框架中编辑心跳动画

标签： css animate.css

【解决方案1】：

如果您使用的是 animate.min.css，请转到此链接 https://unminify.com/ 并取消缩小 css 并找到以下代码：

@-webkit-keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

并将它们替换为：

@-webkit-keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    14% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    42% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    14% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    42% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

【讨论】：