css3 펄스 효과 지연

Question

안녕하세요 저는 css3에서 펄스를 발생시키는 버튼이 있습니다. (훌륭하게 작동합니다.) 내가 원하는 것은 12 초마다 펄스입니다 ... 어떻게하면됩니까?

.pulse { 
     animation-name: pulse_animation; 
     animation-duration: 10000ms; 
     transform-origin:70% 70%; 
     animation-iteration-count: infinite; 
     animation-timing-function: linear; 
    } 

    @keyframes pulse_animation { 
     0% { transform: scale(1); } 
     30% { transform: scale(1); } 
     40% { transform: scale(1.08); } 
     50% { transform: scale(1); } 
     60% { transform: scale(1); } 
     70% { transform: scale(1.05); } 
     80% { transform: scale(1); } 
     100% { transform: scale(1); } 
    } 

Answer 1

작동 방식을 정확히 알 수 있도록 재생 시간을 3 초로 설정했습니다. urself로 기간을 자유롭게 조정할 수 있습니다. 3s을 12s으로 변경하십시오.

https://jsfiddle.net/bL164jj8/

.pulse { 
 
    animation-name: pulse_animation; 
 
    animation-duration: 3s; 
 
    transform-origin: 70% 70%; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: lightblue; 
 
} 
 
@keyframes pulse_animation { 
 
    0% { 
 
    transform: scale(1); 
 
    } 
 
    8% { 
 
    transform: scale(1.01); 
 
    } 
 
    16% { 
 
    transform: scale(1.02); 
 
    } 
 
    24% { 
 
    transform: scale(1.03); 
 
    } 
 
    32% { 
 
    transform: scale(1.04); 
 
    } 
 
    40% { 
 
    transform: scale(1.05); 
 
    } 
 
    50% { 
 
    transform: scale(1.06); 
 
    } 
 
    58% { 
 
    transform: scale(1.05); 
 
    } 
 
    66% { 
 
    transform: scale(1.04); 
 
    } 
 
    74% { 
 
    transform: scale(1.03); 
 
    } 
 
    82% { 
 
    transform: scale(1.02); 
 
    } 
 
    90% { 
 
    transform: scale(1.01); 
 
    } 
 
    100% { 
 
    transform: scale(1); 
 
    } 
 
}

<div class='pulse'> 
 

 
</div>