如何在單個元素上應用多個旋轉CSS3過渡

Question

我想要實現這樣的事情：

img{ 
    transition: 5s linear; 
    transform: scale(2,2) rotate(-20deg) rotate(40deg) rotate(-40deg) rotate(20deg) scale(0.5, 0.5); 
} 

但只是擴展了一下，然後縮放回原來的大小。

Answer 1

您只需創建一個元素，使用關鍵幀動畫，添加到它，如下面的例子：

.element { 
 
    animation: rotate 5s infinite; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: green; 
 
} 
 

 
@keyframes rotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    25% { 
 
    transform: rotate(20deg); 
 
    } 
 
    50% { 
 
    transform: rotate(-20deg); 
 
    } 
 
    75% { 
 
    transform: rotate(20deg); 
 
    } 
 
    100% { 
 
    transform: rotate(-20deg); 
 
    } 
 
}

<div class="element"> </div>

你可以在這裏找到更多關於它的信息：https://css-tricks.com/almanac/properties/a/animation/

Answer 2

我建議你使用過的動畫過渡。

@keyframes{ 
    0%{ 
     //your transform 
    } 
    50%{ 
     //your transform 
    } 
    100%{ 
     //your transform 
    } 
}