长期用户，第一次张贴。
动画在PC和iPhone Firefox/Safari上运行完美，但在iPhone Chrome上不能。（最新）。
动画似乎只是捕捉到结束位置后，动画的持续时间。我没有得到它的工作短暂，但我认为这是由于它缓存了我的CSS的旧版本。我不知道哪一个或什么是不同的。点是我知道它可以工作。
任何帮助都非常感谢。我尽我所能清理了代码。工作代码到处都有注解。代码还有一点，但这是它的核心。
也在运行Bootstrap4以获取信息。

$(".flip-card-inner").on('click mouseenter', function () {
    // $(this).css("animation-play-state", "initial"); // pause Y axis rotate
    // $(this).css("animation-play-state", "paused");

    $("div.link").each(function(index) {
    $(this).delay(150*index).slideDown("fast");

    $(".flip-card-inner").addClass('fliptoback');

    });
});

body {
  height:100vh; 
  background-color: #3a4757;
  background-image: url("img/grey_wash_wall.png");
  background-blend-mode: hard-light;
  background-size: 25%;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 200px;
  border-radius: .7rem ;
  border-color: black;
  -webkit-perspective: 500px;
  perspective: 500px;   
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: -webkit-transform; 
    transition: transform;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #181E25;
  background-image: url("img/brushed.jpg");
  background-blend-mode: multiply;
  background-size:25%;
  border-radius: .7rem ;
  border-color: #181E25;
  color: white;
 }
  
  /* Style the back side */
.flip-card-back {
    background-color: #181E25;
    background-image: url("img/brushed.jpg");
    background-blend-mode: multiply;
    background-size:25%;
    border-radius: .7rem ;
    border-color: #181E25;
    color: white;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }

.fliptoback{
  animation-name: yaxis;
  animation-duration: .5s;
  animation-fill-mode: forwards; 
}

@keyframes yaxis {
  from   {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
} 
  to {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-card">
  <div class=" flip-card-inner" >
    <div class=" flip-card-front" >
      <p>this is the front</p>
    </div>
    <div class=" flip-card-back" >
      <p>this is the back</p>
    </div>
  </div>
</div>
<div class="brandbox">
<h3 class="text-center text-light font-weight-light mt-3 text-uppercase">BRAND</h3>

        </div>
    
<div class="link text-light border border-light text-uppercase">
            Website
</div>