如何减小animate.css中heartbeat动画的放大尺寸

完全可以通过自定义CSS覆盖Animate.css的默认动画规则实现该需求，无需修改原有按键类名，具体操作如下：

操作步骤 #

1. 确保你写的自定义CSS代码加载顺序晚于Animate.css的引入语句，保证自定义规则优先级足够，能够覆盖默认动画配置。
2. 重写animate__heartBeat的关键帧，调整放大倍率即可。默认的heartBeat动画最大会放大到1.3倍，你可以根据需求把数值调整到1.05~1.15之间，就能避免溢出到相邻按键区域，示例代码如下：

@keyframes animate__heartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.1); } /* 此处数值控制放大倍率，可按需调整 */
  28% { transform: scale(1); }
  42% { transform: scale(1.1); } /* 同步调整此处的缩放值 */
  70% { transform: scale(1); }
}

/* 如需兼容webkit内核浏览器，可补充前缀版本的规则 */
@-webkit-keyframes animate__heartBeat {
  0% { -webkit-transform: scale(1); }
  14% { -webkit-transform: scale(1.1); }
  28% { -webkit-transform: scale(1); }
  42% { -webkit-transform: scale(1.1); }
  70% { -webkit-transform: scale(1); }
}

可选优化方案 #

如果想要进一步避免溢出问题，可以给单个按键元素添加overflow: hidden和transform-origin: center规则，确保缩放中心固定在按键正中间，不会出现偏移。

内容的提问来源于stack exchange，提问作者Mir Adnan Siraj