通過CSS閃爍縮小縮小圖像

Question

我使用此代碼創建一個閃爍的放大和縮小圖像，但它只能放大，之後，它會重置圖像並再次放大。

@keyframes blink { 
     0% { 
      -webkit-transform: scale(1); 
      transform: scale(1); 
     } 
     100% { 
      -webkit-transform: scale(1.5); 
      transform: scale(1.5); 
     } 
    } 
    img { 
     transition: .3s ease-in; 
     animation: blink 1s; 
     animation-iteration-count: infinite; 
    } 

JSFiddle

Answer 1

容易的解決辦法是：

@keyframes blink { 
     0% { 
      -webkit-transform: scale(1); 
      transform: scale(1); 
     } 
     50% { 
      -webkit-transform: scale(1.5); 
      transform: scale(1.5); 
     } 
     100% { 
      -webkit-transform: scale(1); 
      transform: scale(1); 
     } 
    } 
    img { 
     transition: .3s ease-in; 
     animation: blink 1s; 
     animation-iteration-count: infinite; 
    } 

所以，你只需要在動畫的結尾使圖像相同的位置，因爲它是在啓動。 ：）

Answer 2

您必須再次將它設置爲起點。像這樣：

@keyframes blink { 
     0% { 
      -webkit-transform: scale(1); 
      transform: scale(1); 
     } 
     50% { 
      -webkit-transform: scale(1.5); 
      transform: scale(1.5); 
     } 
     100% { 
      -webkit-transform: scale(1); 
      transform: scale(1); 
     } 
    } 
    img { 
     transition: .3s ease-in; 
     animation: blink 1s; 
     animation-iteration-count: infinite; 
    }