我想指出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度旋转后箭头的尖端

回答

相关问题