html - 如何防止抖动div文字褪色

Question

我有几个带有文本的 div，我对其应用了摇动动画。单击该按钮，它使 div 摇动。但是，我注意到这样做时文本不会保持清晰，在 div 晃动时它会稍微变淡。当 div 摇晃时，如何使文本保持清晰？这是我的代码:

$('.btn').click(function () {
  $('.card').addClass('card-hover')
  
  setTimeout( function() {
    $('.card').removeClass('card-hover')
  }, 1000);
  
});

body {
  background: #aaa;
}

.card-box{
  display: grid;
  grid-template-columns: 50% 50%;
  width: 600px;
  // border: 2px solid red;
}

.btn {
  margin: 40px 50px 0px 235px;
  height: 40px;
  width: 140px;
  border: 2px solid #000;
  border-radius: 20px;
}

.btn:hover{
  background-color: #888;
}

.card {
  margin: 50px 0px 0px 50px;
  height: 300px;
  width: 210px;
  border: 2px solid #000;
  border-radius: 20px;
  // background-color: #fff;
  background-color: #cce6ff;
  display: inline-block;
}

.card-hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

  .verse-text {
    font-family: 'Roboto', sans-serif;
    padding: 8px;
    margin-top: 10px;
    text-align: left;
    font-weight: 600;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-box">

<div class="card">
<div class="verse-text">
   The Riemann hypothesis has thus far resisted all attempts to prove it. Stieltjes (1885) published a note claiming to have proved the Mertens conjecture with c=1, a result stronger than the Riemann hypothesis and from which it would have followed. 
  </div>
</div>

<div class="card">
<div class="verse-text">
   The Riemann hypothesis was computationally tested and found to be true for the first 200000001 zeros by Brent et al. (1982), covering zeros sigma+it in the region 0 < t <81702130.19). 
  </div>
</div>
  
  
</div>


<input type="button" class="btn" value="Shake">

Answer 1

$('.btn').click(function () {
  $('.card').addClass('card-hover')
  
  setTimeout( function() {
    $('.card').removeClass('card-hover')
  }, 1000);
  
});

body {
  background: #aaa;
}

.card-box{
  display: grid;
  grid-template-columns: 50% 50%;
  width: 600px;
  // border: 2px solid red;
}

.btn {
  margin: 40px 50px 0px 235px;
  height: 40px;
  width: 140px;
  border: 2px solid #000;
  border-radius: 20px;
}

.btn:hover{
  background-color: #888;
}

.card {
  margin: 50px 0px 0px 50px;
  height: 300px;
  width: 210px;
  border: 2px solid #000;
  border-radius: 20px;
  // background-color: #fff;
  background-color: #cce6ff;
  display: inline-block;
}

.card-hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.card-hover .verse-text {
    animation: shakeText 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes shakeText {
    10%, 90% {
        transform: translate3d(1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(-2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(-4px, 0, 0);
    }
    }

  .verse-text {
    font-family: 'Roboto', sans-serif;
    padding: 8px;
    margin-top: 10px;
    text-align: left;
    font-weight: 600;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-box">

<div class="card">
<div class="verse-text">
   The Riemann hypothesis has thus far resisted all attempts to prove it. Stieltjes (1885) published a note claiming to have proved the Mertens conjecture with c=1, a result stronger than the Riemann hypothesis and from which it would have followed. 
  </div>
</div>

<div class="card">
<div class="verse-text">
   The Riemann hypothesis was computationally tested and found to be true for the first 200000001 zeros by Brent et al. (1982), covering zeros sigma+it in the region 0 < t <81702130.19). 
  </div>
</div>
  
  
</div>


<input type="button" class="btn" value="Shake">