CSS3 transition and animation on same Node

Question

Is it possible, to work with a CSS3 transition and an animation for the same property on the same object?

I am trying to enable a fade in on :hover with a transition and after that the animation should continue infinitely. The currently not working code is in this fiddle

When only the transition is in the code, the transition works. When both properties are active, it seems only the animation works and the transition is clearly not working.

Is there any way to combine both effects in this one element?

Answer 1

You can try adding a delay to your animation. You will probably also like to change to order of your opacity keyframes, such that the animation starts off where the transition ends.

Fiddle

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