我正在尝试校正纯CSS中三个图像的无限翻转，旋转，旋转和消失的动画持续时间和时间线

Question

我测试了以下答案：

• Pure CSS rotate animation broken while in infinite loop
• Stop infinite CSS3 animation and smoothly revert to initial state
• CSS Image Fade Animation Only Runs First Time，

但是动画的持续时间和时间轴（例如，从头到尾逐步执行）不起作用。这三个图像必须同时位于同一位置。

我想使用https://codepen.io/jay-bee-why/pen/Htejl，但不幸的是，我不想使用jQuery。我是CSS和JavaScript纯粹主义者。

一张图像值一千个字。您将容易理解图像。我还提供了非常小的代码段框。

  .flipping-images
  {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    height: 80%;
    justify-content: center;
    /* opacity: 0; */
    position: relative;
    transform: translateX(100%);
    width: 22%;
  }
.show-l
{
  animation: show-image 5s ease-in-out 300ms infinite;
  left: 0;
  position: absolute;
  transform-origin: left;
}

.hide-l
{
  animation: hide-image 5s ease-in-out 800ms infinite;
  position: absolute;
  transform-origin: left;
}

.hide-l2
{
  animation: hide-image 5s ease-in-out 600ms infinite;
  position: absolute;
  transform-origin: right;
}
@keyframes hide-image
{
  0%
  {
    left: 0;
    transform: rotateY(0deg);
  }

  30%
  {
    left: 10%;
    transform: rotateY(0deg);
  }

  50%
  {
    opacity: 1;
  }

  100%
  {
    left: -100%;
    opacity: 0;
    transform: rotateY(90deg);
  }
}

@keyframes show-image
{
  0%
  {
    left: 100%;
    transform: rotateY(90deg);
  }

  30%
  {
    left: 110%;
    transform: rotateY(90deg);
  }

  100%
  {
    left: 0%;
    transform: rotateY(0deg);
  }
}

  <div class="flipping-images">
    <img class="show-l"   src="https://via.placeholder.com/432x864/fdc34f/FEFEFE?text=1">
    <img class="hide-l2"   src="https://via.placeholder.com/432x864/3e72ff/FEFEFE?text=2">
    <img class="hide-l"   src="https://via.placeholder.com/432x864/222222/FEFEFE?text=3">
  </div>

Answer 1

我不确定您是否了解您的图片，因为它说第二张图片应该消失了，但是它也说动画是无限的。我希望它能按您的预期工作，即使不是仅对需要解决的问题发表评论。

我正在使用animationend事件来控制动画。

var counter = 1;
var div = document.querySelector('.flipping-images');
var images = document.querySelectorAll('.flipping-images img');

var showNext = function () {
  counter++;
  if (counter > 3) counter = 1;
  div.classList.remove('image1', 'image2', 'image3')
  div.classList.add('image'+counter);
};

for (var img of images) {
  img.addEventListener('animationend', showNext);
  img.addEventListener('click', showNext);
}

document.querySelector('#next').addEventListener('click', showNext);

.flipping-images {
  perspective: 300px;
}
.flipping-images img {
  display: none;
  animation: rotate 5s linear 1;
}
.flipping-images.image1 img:nth-child(1),
.flipping-images.image2 img:nth-child(2),
.flipping-images.image3 img:nth-child(3) {
  display: block;
}
.flipping-images.image2 img:nth-child(2) {
  animation: rotate 5s linear infinite;
}
@keyframes rotate {
  0% { transform: rotateY(-45deg); }
  100% { transform: rotateY(45deg); }
}
button {
  margin: 1em;
}

<div class="flipping-images image1">
  <img src="https://via.placeholder.com/100x100/fdc34f/FEFEFE?text=1">
  <img src="https://via.placeholder.com/100x100/3e72ff/FEFEFE?text=2">
  <img src="https://via.placeholder.com/100x100/222222/FEFEFE?text=3">
</div>

<button id="next">Next</button>