Css animation lifetime

Question

일정한 기간 동안 애니메이션을 실행하는 방법을 이해할 수 없습니다.

@-webkit-keyframes pulse { 
    0% { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    } 

    50% { 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
    } 

    100% { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    } 
} 

.pulse { 
    -webkit-animation-name: pulse; 
} 

그래서 내가 pulse을 적용 할 요소의 CSS를 수정 : 여기

애니메이션의 원천입니다.

-webkit-animation-duration: 10s; 
-webkit-animation-delay: 0s; 
-webkit-animation-iteration-count: 10; 

필자는 문서를 이해하므로 애니메이션을 각각 10 초씩 실행해야합니다. 그래서, 100 초. 그러나 이것은 잘못된 것입니다. 애니메이션 수명을 100 초로 지정하는 올바른 방법은 무엇입니까?

Answer 1

좋아요, 그렇다면 타이밍 기능이 올바르지 않으므로 애니메이션 기간을 10s으로 설정하면 처음주기가 5 초가되고 다음 5 분 후에 div을 수평 확장 할 수 있습니다. 나는 자바 스크립트 여기 아래 계산 사용하고, 또한 그냥 here에서했다 자바 스크립트 카운트 다운과 동기화 1 초로 설정 animation-delay 속성을 사용하고

... 당신이 볼 경우에 따라서

는 애니메이션이 완벽하게 종료 당신이 의견을 내가 따라 내 대답을 수정하겠습니다보다 다른 뭔가를 기대하는 경우 1에 그래서

Demo

이

(I 2 = 20 초 애니메이션의 반복을 감소했습니다) ..., 완벽하게 작동

참고 : OP 만 사용하는 경우 -webkit 및 은 Firefox 또는 Internet Explorer 용 코드를 요청하지 않았으므로 Chrome을 사용하여 데모를 확인하십시오.

@-webkit-keyframes pulse { 
    0% { 
     -webkit-transform: scale(1); 
     transform: scale(1); 
    } 
    50% { 
     -webkit-transform: scale(2); 
     transform: scale(2); 
    } 
    100% { 
     -webkit-transform: scale(1); 
     transform: scale(1); 
    } 
} 

.pulse { 
    -webkit-animation-name: pulse; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-delay: 1s; 
    -webkit-animation-iteration-count: 2; 
    position: absolute; 
    left: 50%; 
    font-size: 50px; 
    top: 10%; 
}