Question

在这段代码中，我试图将图标旋转180度。但是它会在图标旋转180度的情况下工作，但旋转结束时它会面向下方而不是向上方向。我可以解决这个问题？

我的HTML代码：

Error: Type Modal is part of the declarations of 2 modules: ...

关联的CSS：

<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>

Answer 1

您需要声明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

我想在旋转180度后指向箭头的尖端

1 个答案: