为什么不能重复使用CSS关键帧?

时间:2019-10-02 18:20:41

标签: css css-animations

如果两个不同的animation属性具有相同的关键帧,但是其中一个被反转,则它们都不在播放。例如:

.test { animation: fade 1s; }
.test:hover { animation: fade 1s reverse; }

@keyframes fade {
  from { background: greenyellow; }
  to { background: orange; }
}

但是,如果制作了关键帧副本,它将起作用:

.test { animation: fade 1s; }
.test:hover { animation: fadeCopy 1s reverse; }

@keyframes fade {
  from { background: greenyellow; }
  to { background: orange; }
}
@keyframes fadeCopy {
  from { background: greenyellow; }
  to { background: orange; }
}

是否可以在不创建关键帧副本的情况下达到与第二个示例相同的效果?

Codepen demo

0 个答案:

没有答案