如何减小animate.css heartbeat 放大尺寸

Question

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

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

class="animate__animated animate__slow animate__infinite animate__heartBeat"

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

Answer 1

如果您正在使用 animate.min.css 转到此 link 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);
    }
}

如何减小animate.css heartbeat 放大尺寸

How to reduce animate.css heartbeat enlarge size

css

animate.css