CSS3のアニメーションを後ろに移動する

ちょっと私は@keyframesアニメーションを使って脈打った効果を出すCSS3アニメーションを持っています。問題はアニメーションが毎回0％から100％まで開始し、0％から100％と100％〜0％の後に連続性を持つためにパルス効果がある。ボールは、フルサイズに増加する必要がありますし、ゆっくりと初期サイズに減少し、再び増加し、decrese後など。CSS3のアニメーションを後ろに移動する

<html> 
    <head> 
     <title>Pulse effect</title> 
     <style> 

     /*Border radius 50% to make it round */ 
     #circle{ 
      position: relative; 
      width: 50px; 
      height: 50px; 
      border:2px solid red; 
      border-radius: 50%; 
      } 

     #circle:after{ 
      content: ''; 
      width: 20px; 
      height: 20px; 
      display: block; 
      left:50%; 
      margin-left: -10px; 
      top:50%; 
      margin-top: -10px; 
      background-color: hsla(41, 97%, 47%,1); 
      border-radius: 50%; 
      position: absolute; 
      /*Use keyframe animation to manipulate the effect */ 
      animation:pulseone 2s infinite; 
     } 


     @keyframes pulseone{ 
      /*Use SCALE value from TRANSFORM method to increse/decrese the x,y of the vector */ 
      0% {transform:scale(1,1); 
       background-color: hsla(41,97%,47%,1);} 
      /*25%{transform:scale(1.4,1.4); 
       background-color: hsla(41,97%,47%,.9);} 
      50%{transform:scale(1.8,1.8); 
       background-color:hsla(41,97%,47%,.8);} 
      75%{trasform:scale(2.2,2.2); 
       background-color: hsla(41,97%,47%,.7);}*/ 
      100%{transform:scale(2.5,2.5); 
       background-color: hsla(41,97%,47%,.6);} 
     } 
     </style> 
    </head> 
    <body> 
     <div id="circle"></div> 


    </body> 
</html>

出典

2016-11-19 S. Georgian

あなたが後にしている効果を得るためにanimation-direction: alternateを使用してください。あなたが持っている速記で

、ちょうどalternateキーワードを追加：

animation:pulseone 2s infinite alternate;

出典

2016-11-19 13:28:31 Stuart

をはいそれは私がfor.Thanksを探しています何ですが、どのように私は最後にその遅延を取り除くことができますか！？ –

新しい何かを毎日勉強してください！ –

最後に私は少しの遅れがありますが、どうすればそれを取り除くことができますか？ –

CSS3のアニメーションを後ろに移動する

答えて

関連する問題