时间戳

首页 > 解决方案 > 如何减小 animate.css 心跳放大尺寸

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

问题描述

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

在此处输入图像描述

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

class="animate__animated animate__slow animate__infinite animate__heartBeat"

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

标签： cssanimate.css

解决方案

如果您使用的是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);
    }
}

推荐阅读