css3에서 애니메이션이 다른 애니메이션을 트리거 할 수 있습니까?

Question

CSS3에서 다른 애니메이션으로 애니메이션을 트리거 할 수 있습니까? 아니면 다른 애니메이션이 끝난 직후에 하나의 애니메이션을 시작할 수 있습니까? 나는 그것이 자바 스크립트로 가능하다는 것을 알고 있지만 순수한 css3으로 얻을 수 있는지 알고 싶다.

Answer 1

전환과 함께 transition-delay을 사용할 수 있습니다.

1. 레드 1 초에 녹색으로 : 내 코드에서

   는 transition 스타일에서 변경 div됩니다.

2. 100px에서 250px까지의 폭 (2s).
3. 높이가 100px에서 150px까지 1 초입니다.

transition-delay 스타일의 원인 :

1. 첫 번째 애니메이션이 즉시 (배경)이 발생합니다.
2. 두 번째 애니메이션은 1s (너비) 이후에 발생합니다.
3. 3 번째 (높이) 이후에 세 번째 애니메이션이 발생합니다.

최종 결과는 이전 애니메이션의 발 뒤꿈치에 따라 각 애니메이션이 이어지는 것입니다.

니핏

div { 
 
    transition: background 1s, width 2s, height 1s; 
 
    transition-delay: 0s, 1s, 3s; 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
} 
 

 
div:hover { 
 
    background: green; 
 
    width: 250px; 
 
    height: 150px; 
 
}

<div> 
 
</div>