CSS3 애니메이션이 3 초 동안 종료 상태로 유지

Question

CSS3 애니메이션을 할 때 애니메이션의 끝에 몇 초 동안 머물러 서 원래 상태로 돌아갈 수 있습니까?

마지막 프레임에서 CSS3 애니메이션을 끝내거나 첫 번째 프레임으로 돌아갈 수 있지만 몇 초 동안 마지막 프레임에서 일시 중지 한 다음 처음으로 돌아가고 싶습니다.

감사합니다.

Answer 1

확인합니다. 키 프레임 정지는 전체 애니메이션의 비율로 측정되기 때문에 약간의 계산을해야합니다. 전체 애니메이션이 12 초 동안 지속되어야한다고 가정 해 봅시다. 즉, 총 애니메이션 시간의 마지막 25 % 동안 애니메이션이 움직이지 않아야합니다. 이를 증명하기 위해 예제를 W3schools에서 수정합니다. 대신 말의 애니메이션의 시작 부분에있는 지연을 신경 쓰지 않는 경우에, 그것도 쉽게 것을

div.animated { 
    -webkit-animation: with_delay 12s linear 0s infinite; /* Chrome, Safari, Opera */ 
    animation: with_delay 12s linear 0s infinite; /* Standard syntax */ 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes with_delay { 
    0% {background: red;} 
    75% {background: green;} 
    100% {background: green;} 
} 

/* Standard syntax */ 
@keyframes with_delay { 
    0% {background: red;} 
    75% {background: green;} 
    100% {background: green;} 
} 

Here is a live demo.

---

참고. 이미 구현 한 애니메이션 기법에 따라 간단히 animation-delay 또는 transition-delay을 지정하십시오.

Answer 2

나는 그것이 작동하도록 약간의 자바 스크립트가 필요하다고 생각합니다. Javascript를 통해 애니메이션의 끝을 감지하고 타이머를 실행할 수 있으며 타이머가 완료되면 애니메이션을 재설정하고 다시 시작할 수 있습니다.

는 여기에 몇 가지 참조입니다 :

• CSS Animation Callback
• Restart CSS Animation