css3パルスエフェクトの遅延

Question

こんにちは私は、それが欲しいのは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>