我想指出180度旋轉後箭頭的尖端

在這段代碼中，我試圖旋轉圖標180度。但它會作爲圖標旋轉180度，但旋轉結束時它會面朝下而不是向上的方向，我可以解決這個問題嗎？我想指出180度旋轉後箭頭的尖端

我的html代碼：

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="troll.css"> 
     <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 
     <link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" /> 
     <link rel="stylesheet" type="text/css" href="../project/style.css" /> 
     <link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    </head> 
    <body> 
     <i class="spinner fa fa-caret-down"></i> 
    </body> 
</html>

相關的CSS：

.spinner { 
    -webkit-animation:spin 0.5s linear 1; 
    -moz-animation:spin 0.5s linear 1; 
    animation:spin 0.5s linear 1; 
} 
@keyframes spin { 
    0% { 
    transform: rotate(0); 
    } 
    100% { 
    transform: rotate(180deg); 
    } 
} 
-webkit-keyframes spin { 
    0% { 
    transform: rotate(0); 
    } 
    100% { 
    transform: rotate(180deg); 
    } 
}

來源

2016-08-23 Dream Hunter

您需要註明fill-mode使得留在最後一幀，在你的代碼是速記聲明它會看起來像這樣：

.spinner { 
    -webkit-animation:spin 0.5s linear 1 forwards; 
    -moz-animation:spin 0.5s linear 1 forwards; 
    animation:spin 0.5s linear 1 forwards; 
}

如果你要獨立聲明它的語法是animation-fill-mode: forwards

來源

2016-08-23 09:19:42 Duopixel

是的......它應該工作 –

我想指出180度旋轉後箭頭的尖端

回答

相關問題