做一個CSS3動畫倒退

嘿傢伙我有一個CSS3動畫，使用@keyframes動畫產生脈動效果。問題是動畫每次從0％開始到100％，我想從0％開始到100％和100％到0％之間，所以脈衝效應具有連續性。球應該增加到全尺寸，並且在緩慢減小到初始尺寸之後再增加和減少之後等等。做一個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動畫倒退

回答

相關問題