Html 旋转180度后，我想指出箭头的尖端_Html_Css

Html 旋转180度后，我想指出箭头的尖端

html css

Html 旋转180度后，我想指出箭头的尖端,html,css,Html,Css,在这段代码中，我试图将图标旋转180度。但它会像图标旋转180度一样工作，但旋转结束时，它将朝下而不是朝上。我如何解决此问题我的html代码： <html> <head> <link rel="stylesheet" type="text/css" href="troll.css"> <meta http-equiv="Content-Type" content="application/xhtml+xml; c

在这段代码中，我试图将图标旋转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>

您需要声明

填充模式

，以便它保留在最后一帧中，在您的代码（即简写声明）中，它将如下所示：

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

如果单独声明，语法为

动画填充模式：forwards

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