css動畫忽略旋轉

Question

我正在嘗試製作一個動畫，其中很少的元素會比他們顯得更大並縮回到正常。

下面是我得到了什麼：

一個元素

#element { 
    position: absolute; 
    width: 38%; 
    height: auto; 
    animation: ani 250ms ease-in; 
    -webkit-animation: ani 250ms ease-in; 
    transform: rotate(82deg); 
} 

和關鍵幀

@keyframes ani { 
    0% { 
     transform: scale(1.5); 
     -webkit-transform: scale(1.5); 
    } 
    100% { 
     transform: scale(1.0); 
     -webkit-transform: scale(1.0); 
    } 
} 

HTML

<div id="wrapper"> 
    <img id="element" src="img.svg"> 
    <img id="element2" src="img2.svg"> 
</div> 

問題是，無論何時動畫開始，元素都會顯示爲從未旋轉過的狀態，並且只有在動畫結束後纔會旋轉。我怎麼能強制他們在動畫之前旋轉？

Answer 1

你應該在動畫變換結合旋轉代碼。基本上rotate和scale都是transform屬性的值，所以如果你只在動畫中使用縮放，它將覆蓋rotate的值並且只會顯示scale。

#element { 
 
    position: absolute; 
 
    width: 38%; 
 
    height: auto; 
 
    animation: ani 250ms ease-in; 
 
    -webkit-animation: ani 250ms ease-in; 
 
    transform: rotate(82deg); 
 
} 
 

 
@keyframes ani { 
 
    0% { 
 
     transform: scale(1.5) rotate(82deg); 
 
     -webkit-transform: scale(1.5) rotate(82deg); 
 
    } 
 
    100% { 
 
     transform: scale(1.0) rotate(82deg); 
 
     -webkit-transform: scale(1.0) rotate(82deg); 
 
    } 
 
}

<div id="wrapper"> 
 
    <img id="element" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif"> 
 
    <img id="element2" src="http://smallbusinessbc.ca/wp-content/themes/sbbcmain/images/circle-icons/icon-education.svg"> 
 
</div>

Answer 2

您需要在旋轉移動到關鍵幀：

#element { 
    position: absolute; 
    width: 38%; 
    height: auto; 
    animation: ani 250ms ease-in; 
    -webkit-animation: ani 250ms ease-in; 
} 

@keyframes ani { 
    0% { 
     transform: scale(1.5) rotate(0deg); 
     -webkit-transform: scale(1.5) rotate(0deg); 
    } 
    100% { 
     transform: scale(1.0) rotate(82deg); 
     -webkit-transform: scale(1.0) rotate(82deg); 
    } 
}