CSS按钮动画无法启动：重启按钮无限缩放动画失效排查

问题排查与修复点： #

• 动画属性写法错误：原代码将animation-name与动画时长、循环次数合并写在同一个属性里，不符合CSS语法规则。animation-name仅需指定动画名称，其余动画参数需单独声明，或直接使用animation简写属性。
• 关键帧逻辑不完整：原@keyframes仅定义了从初始尺寸到缩小的状态，无法实现“缩小-放大”的循环效果，需要补充关键帧完成往复动画。

修正后的完整CSS代码： #

#restartButton {
    width: 17%;
    height: 100px;
    cursor: pointer;
    color:rgb(255, 197, 249);
    font-size: 3.5em;
    border-style: solid;
    border-width: 5px;
    border-color: white;
    background-color: rgb(42, 40, 40);
    border-radius: 35px;
    transition: 0.4s;
    /* 使用animation简写属性，指定动画名、时长、循环次数、往复方向 */
    animation: example 5s infinite alternate;
}

/* 修正关键帧，实现缩小-放大循环 */
@keyframes example {
    0% {height: 100px; width: 17%;}
    50% {height: 80px; width: 14%;}
    100% {height: 100px; width: 17%;}
  }

#restartButton:hover {
    transition: 0.4s;
    border-radius: 75px;
    color: rgb(42, 40, 40);
    background-color: rgb(255, 197, 249);
}

简化写法说明： #

如果不想写多段关键帧，可以利用alternate动画方向值让动画自动反向播放，此时关键帧只需定义初始到缩小的状态：

@keyframes example {
    from {height: 100px; width: 17%;}
    to {height: 80px; width: 14%;}
}
/* 对应animation属性保持：animation: example 5s infinite alternate; */

内容的提问来源于stack exchange，提问作者Muhammad Ali