如何在预期的动画之前停止 css 旋转回面对面？

Question

我正在尝试用 JS 和 CSS 模拟掷硬币的动画。

我猜关键是 CSS 中的 transform-style、backface-visibility、rotateY、animation-fill-mode 和 transform 以及 JS 中的 Math.random。

如果硬币是正面，一切正常。

如果硬币是尾巴，点击按钮会将其翻转到正面，然后开始预期的翻转动画。

如何让它直接从尾部开始翻转动画？

const coin = document.querySelector('#coin');
const button = document.querySelector('#flip');
const status = document.querySelector('#status');
const heads = document.querySelector('#headsCount');
const tails = document.querySelector('#tailsCount');

let headsCount = 0;
let tailsCount = 0;


function deferFn(callback, ms) {
  setTimeout(callback, ms); 
}

function processResult(result) {
   if (result === 'heads') {
      headsCount++;
      heads.innerText = headsCount;
    } else {
      tailsCount++;
      tails.innerText = tailsCount;
    }
    status.innerText = result.toUpperCase();
}

function flipCoin() {
  coin.setAttribute('class', '');
  const random = Math.random();
  const result = random < 0.5 ? 'heads' : 'tails';
 deferFn(function() {
   coin.setAttribute('class', 'animate-' + result);
   deferFn(processResult.bind(null, result), 2900);
 }, 100);
}

button.addEventListener('click', flipCoin);

h2 {
  margin: .25rem;
}

div.container {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  padding: 1rem;
  background-color: skyblue;
}

#coin {
  position: relative;
  width: 15rem;
  height: 15rem;
  margin: 2rem 0rem;
  transform-style: preserve-3d;

}

#coin div {
  width: 100%;
  height: 100%;
  border: 2px solid black;
  border-radius: 50%;
  backface-visibility: hidden;
  background-size: contain;
  position: absolute;
}

.heads {
    background-image: url("https://en.numista.com/catalogue/photos/inde/2311-original.jpg");
}

.animate-heads {
  animation: flipHeads 3s;
  animation-fill-mode: forwards;
}

@keyframes flipHeads {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(1800deg);
  }
}

.tails {
    background-image: url("https://en.numista.com/catalogue/photos/inde/3165-original.jpg");
  transform: rotateY(-180deg);
}

.animate-tails {
  animation: flipTails 3s;
  animation-fill-mode: forwards;
}

@keyframes flipTails {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(1620deg);
  }
}

<div class='container'>
  <h2>Confused about your life decision? Just flip this coin!</h2>
  <h2>Btw, don't forget to assign something to both sides.</h2>
  <p>And don't take your life decision based on this stupid coin flip. I was kidding.</p>
  <div id="coin" class=''>
    <div id="heads" class="heads"></div>
    <div id="tails" class="tails"></div>
  </div>
  <button id="flip">Flip this thing</button>
  <p>Heads: <span id="headsCount">0</span> Tails: <span id="tailsCount">0</span></p>
  <p><span id="status"></span></p>
</div>

Answer 1

你可以使用css属性：

animation-fill-mode: forwards;