jouer à l'animation du bouton CSS

<head>
<style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  width:100vw;
  height:100vh;
  background:#efeeee;
  display:grid;
  place-items:center;
}
.container{
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:4rem;
  background:#efeeee;
  border-radius:50%;
  transition:all 0.3s ease-in;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.1),
    -10px -10px 10px rgba(255,255,255,0.6);
}
.container .fas{
  display:grid;
  place-items:center;
  font-size:4rem;
  color:gray;
}
.container:active{
  box-shadow: inset 10px 10px 10px rgba(0,0,0,0.1),
    inset -10px -10px 10px rgba(255,255,255,0.6);
}
.container:active .fas{
  color:#721efa;
}
</style>
</head>
<body>
  <div class="container">
    <i class="fas fa-play"></i>
  </div>  
</body>
SECRET MYSTERY