倒車動畫與CSS

我申請一個mixin通過通過jQuery中添加類旋轉的東西：倒車動畫與CSS

.rotate-45-left() { 
    -webkit-animation: rotate45left 2.55s ease; 
    -moz-animation: rotate45left 2.55s ease; 
    animation: rotate45left 2.55s ease; 
    animation-fill-mode: forwards; 
} 
@keyframes rotate45left { 
    100% { 
     -webkit-transform: rotate(-45deg); 
     transform: rotate(-45deg); 
    } 
}

這工作第一次，但我想，然後過渡動畫效果回到默認的，未旋轉的位置。我嘗試添加一個額外的類，但是這覆蓋了原始動畫;刪除類會重置它，而不需要動畫。有沒有簡單的方法來實現這一點？

來源

2017-07-15 SB2055

使用的過渡，而不是動畫？ –

@七個階段最大轉換啓用，但旋轉不動畫。 – SB2055

50％-45度，100％恢復正常。 '50％{-webkit-transform：rotate（-45deg）; transform：rotate（-45deg）; } 100％{-webkit-transform：rotate（0deg）; transform：rotate（0deg）;}' –

function back(){ 
 
document.getElementById('ele').classList = "rotate-0-left"; 
 
}

.rotate-45-left { 
 
    -webkit-animation: rotate45left 1.55s ease; 
 
    -moz-animation: rotate45left 1.55s ease; 
 
    animation: rotate45left 1.55s ease; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.rotate-0-left { 
 
    -webkit-animation: rotate0left 1.55s ease; 
 
    -moz-animation: rotate0left 1.55s ease; 
 
    animation: rotate0left 1.55s ease; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes rotate45left { 
 
    
 
    100%{ 
 
    -webkit-transform: rotate(-45deg); 
 
     transform: rotate(-45deg); 
 
    } 
 
} 
 

 

 
@keyframes rotate0left { 
 
    0%{ 
 
    -webkit-transform: rotate(-45deg); 
 
     transform: rotate(-45deg); 
 
    } 
 
    } 
 
    100%{ 
 
    -webkit-transform: rotate(0deg); 
 
     transform: rotate(0deg); 
 
    } 
 
}

<h1 id="ele" class="rotate-45-left"> Rotate </h1> 
 

 
<input type="button" value="back to original" onClick="back()"/>

來源

2017-07-15 16:12:04

你會如何觸發50％的命令，然後100％的命令？ – SB2055

@ SB2055你的意思是在應用「旋轉-45左」類後，元素會旋轉45度，然後它將重置爲原始位置，並且具有相同的動畫？正確？ –

是的。旋轉到45度，等待用戶做些事情，然後旋轉回原來的位置（0）。 – SB2055

倒車動畫與CSS

回答

相關問題