I'm trying to correct the animation duration and timeline of infinite flip, rotation, spin and disappearance of three images in pure CSS

问题

I tested with the following answers:

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,

but the animation duration and timeline (for example, from step by step, from start to end) did not work. The three images need to be in the same place at once.

I wanted to use https://codepen.io/jay-bee-why/pen/Htejl, but unfortunately I do not want to use jQuery. I am CSS and JavaScript purist.

An image is worth a thousand words. You will understand easily the image. I also provide very small snippet code box.

  .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>

回答1:

I'm not sure I understand your image since it says the second image should disappear but it also says the animation is infinite. I hope it's working as you intended, if not just leave a comment on what needs to be fixed.

I'm using the animationend event to control the animations.

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>

来源：https://stackoverflow.com/questions/59523807/im-trying-to-correct-the-animation-duration-and-timeline-of-infinite-flip-rota

标签

css

css-animations

css-transitions

css-transforms

keyframe