javascript - 悬停动画后的效果

Question

我在做this在 freecodecamp challenger 的 codepen 上，我想在悬停效果后看到我的按钮动画。有谁知道这个的解决方案？也许我在代码中做错了什么。这是我的按钮 #random 代码。我做了 reverse 动画，然后我把它放在 #random 中，但它不起作用。

body{
  background-color:black;
}
.message{
  margin: auto;
    width: 50%;
  padding:20px;
  margin: auto;
  width: 50%;
  margin-top:70px;
}
h2{
  margin:auto;
  width:90%;
  margin-top: 5px;
  margin-bottom: 5px;
  color:white;
  text-transform: uppercase;
}
#random{
  background:black;
  border:1px solid;
  width: 200px;
  height: 50px;
  margin: -20px -50px; 
  position:absolute;
  top:50%;
  right:10%;
  color:#595959;
  animation: reverse 0.6s;
  animation-fill-mode: forwards;
}
#random:hover{
  background:black;
  border:1px solid;
  width: 200px;
  height: 50px;
  margin: -20px -50px; 
  position:absolute;
  top:50%;
  right:10%;
  animation: clickmes 0.6s;
  animation-fill-mode: forwards;
}
@keyframes clickmes {
    0% {
        color: #595959;
    }
    25% {
        color: #707070;
    }
    50% {
        color: #a3a3a3;
    }
    100% {
        color: white;
    }
}
 @keyframes reverse {
    0% {
        color: white;
    }
    25% {
        color: #a3a3a3;
    }
    50% {
        color: #707070;
    }
    100% {
        color: #595959;
    }
 }

  <div id="social"><a href="#" class="fa fa-facebook"></a>
    <a href="https://twitter.com/intent/tweet?text=Hello%20world"
  data-size="large" id= "tweet" class="fa fa-twitter" target="_blank"></a>
    </div>
  <div id="where1" class="message"><h2>I need random quotes from Api here.</h2>
    <h4></h4>
</div>

<button id="random">I'm a button</button>

Answer 1

我不确定这是否需要 css 动画，但如果不需要，我会改用过渡。对于不太复杂的事物，转换更容易控制。请在下面查看我的代码片段。

body {
  background: #000000;
}
#random {
  background:black;
  border:1px solid;
  width: 200px;
  height: 50px;
  margin: -20px -50px; 
  position:absolute;
  top:50%;
  right:10%;
  color:#595959;
  transition: color .5s ease;
 }
 
 #random:hover {
  color: #ffffff;
 }

<button type="button" id="random">Button Text</button>

您还可以阅读更多关于转换如何工作的信息 here .