为什么旋转器不旋转/旋转？

Question

我创建了一个锚点链接按钮，当我点击:focus状态下的按钮时，我想要显示微调器动画。我使用 Font Awesome 来显示动画，但是当我点击按钮时，微调器动画无效。

  

注意：我不想在这里使用JavaScript只想做 Pure   CSS

以下是CodePen链接https://codepen.io/rhulkashyap/pen/vLPNdQ

＆＃13;

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
 body {
  font-family: 'Titillium Web', sans-serif;
  text-align: center;
}
#button {
  padding: 15px;
  background-color: green;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  width: 300px;
  display: inline-block;
  text-align: center;
  font-size: 25px;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
#button:before {
  content: "\f090";
  font-family: FontAwesome;
  margin-right: 5px;
}
#button:focus {
  background-color: #02b402;
}
#button:focus:before {
  content: "\f1ce";
  -webkit-animation: spin .8s ease infinite;
  animation: spin .8s ease infinite;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<h2> Click Here</h2>
<a id="button" href="javascript:void(0)">Enter In</a>

＆＃13;

＆＃13;

＆＃13;

Answer 1

变换应该仅适用于块级元素（包括inline-block）。将伪元素设为display:inline-block可使动画生效。

在评论了这个问题之后，我确实看到动画在Chrome v50（dev-m）中也无效，而它在Chrome v43中工作。所以，目前的行为似乎是一致的

@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
 body {
  font-family: 'Titillium Web', sans-serif;
  text-align: center;
}
#button {
  padding: 15px;
  background-color: green;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  width: 300px;
  display: inline-block;
  text-align: center;
  font-size: 25px;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
#button:before {
  display: inline-block;
  content: "\f090";
  font-family: FontAwesome;
  margin-right: 5px;
}
#button:focus {
  background-color: #02b402;
}
#button:focus:before {
  content: "\f1ce";
  -webkit-animation: spin .8s ease infinite;
  animation: spin .8s ease infinite;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<h2> Click Here</h2>
<a id="button" href="javascript:void(0)">Enter In</a>