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