동일한 노드에서 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;