同一节点上的 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;