我有一个动画,它负责按钮悬停状态下的淡入和淡出过渡.
问题是默认动画(-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; }
}