html禁止页面动画,如何在页面加载时阻止CSS动画？

我有一个动画,它负责按钮悬停状态下的淡入和淡出过渡.

问题是默认动画(-webkit-animation：off-state 1s;)在页面加载时触发.如何在第一个悬停状态后才使其处于活动状态？

我知道如何使用CSS转换实现这一目标.我正在寻找使用动画/关键帧的解决方案.

CSS

.button { background: #000; width: 20px; height: 20px; -webkit-animation: off-state 1s; }

.button:hover { -webkit-animation: on-state 1s; }

@-webkit-keyframes on-state {

0% { height: 20px; }

100% { height: 100px; }

}

@-webkit-keyframes off-state {

0% { height: 100px; }

100% { height: 20px; }

}