帶有脈衝的CSS旋轉動畫

Question

我想用CSS製作動畫。它應該旋轉圖像並給它一個脈衝（類似於Shazam的按鈕動畫）。 以下是我的代碼。圖像是旋轉的，但如果我添加「比例」來嘗試並使其脈動，它有一個脈衝但不旋轉。

.animated { 
    animation-duration: 5s; 
     -webkit-animation-duration: 5s; 
    animation-fill-mode: none; 
     -webkit-animation-fill-mode: none; 
    animation-timing-function: linear; 
     -webkit-animation-timing-function: linear; 
    animation-iteration-count: infinite; 
     -webkit-animation-iteration-count: infinite; 
} 

@keyframes rotate { 
    0% { 
     /*transform: scale(1);*/ 
     transform-origin: center center; 
     transform: rotate(-360deg); 
    } 
    50% { 
     /*transform: scale(1.1);*/ 
     transform-origin: center center; 
    } 
    100% { 
     /*transform: scale(1);*/ 
     transform-origin: center center; 
     transform: rotate(0); 
    } 
} 

@-webkit-keyframes rotate { 
    0% { 
     /*-webkit-transform: scale(1);*/ 
     -webkit-transform-origin: center center; 
     -webkit-transform: rotate(-360deg); 
    } 
    50% { 
     /*-webkit-transform: scale(1.1);*/ 
     -webkit-transform-origin: center center; 
    } 
    100% { 
     /*-webkit-transform: scale(1);*/ 
     -webkit-transform-origin: center center; 
     -webkit-transform: rotate(0); 
    } 
} 

.rotate { 
    animation-name: rotate; 
     -webkit-animation-name: rotate; 
} 

有人能幫忙嗎？

Answer 1

這是一個猜測，因爲我不知道你是如何HTML（標記）。

您必須在關鍵幀的每個步驟中添加所有轉換屬性。
因此，如果任何關鍵幀已經設置：transform: scale(2);然後它只會縮放。

所以你必須在所有關鍵幀上設置所有的transfrom屬性。
例如。每個關鍵幀上的transfrom: scale(value) rotate(value);。

.animated { 
 
    animation-duration: 5s; 
 
    -webkit-animation-duration: 5s; 
 
    animation-fill-mode: none; 
 
    -webkit-animation-fill-mode: none; 
 
    animation-timing-function: linear; 
 
    -webkit-animation-timing-function: linear; 
 
    animation-iteration-count: infinite; 
 
    -webkit-animation-iteration-count: infinite; 
 
} 
 
@keyframes rotate { 
 
    0% { 
 
    /*transform: scale(1);*/ 
 
    transform-origin: center center; 
 
    transform: rotate(-360deg) scale(1); 
 
    } 
 
    50% { 
 
    /*transform: scale(1.1);*/ 
 
    transform-origin: center center; 
 
    transform: rotate(-180deg) scale(0.1); 
 
    } 
 
    100% { 
 
    /*transform: scale(1);*/ 
 
    transform-origin: center center; 
 
    transform: rotate(0) scale(1); 
 
    } 
 
} 
 
@-webkit-keyframes rotate { 
 
    0% { 
 
    /*-webkit-transform: scale(1);*/ 
 
    -webkit-transform-origin: center center; 
 
    -webkit-transform: rotate(-360deg) scale(1); 
 
    } 
 
    50% { 
 
    /*-webkit-transform: scale(1.1);*/ 
 
    -webkit-transform-origin: center center; 
 
    -webkit-transform: rotate(-180deg) scale(0.1); 
 
    } 
 
    100% { 
 
    /*-webkit-transform: scale(1);*/ 
 
    -webkit-transform-origin: center center; 
 
    -webkit-transform: rotate(0) scale(1); 
 
    } 
 
} 
 
.rotate { 
 
    animation-name: rotate; 
 
    -webkit-animation-name: rotate; 
 
}

<div> 
 
    <img class="animated rotate" src="http://lorempixel.com/400/200" /> 
 
</div>