同一节点上的 CSS3 过渡和动画

Question

是否可以为同一对象的同一属性使用 CSS3 过渡和动画？

我正在尝试通过过渡在 :hover 上启用淡入，之后动画应该无限继续。当前不工作的代码在 this fiddle 中

当代码中只有转换时，转换有效。当这两个属性都处于事件状态时，似乎只有动画有效，而过渡显然无效。

有没有办法在这个元素中结合两种效果？

Answer 1

您可以尝试为动画添加延迟。您可能还想更改不透明度关键帧的顺序，以便动画从过渡结束的地方开始。

Fiddle

animation:                youtubeplay-pulse 2s infinite;
animation-delay:         .7s;
-webkit-animation:        youtubeplay-pulse 2s infinite;
-webkit-animation-delay: .7s;