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

问题描述

我测试了以下答案：

但是动画持续时间和时间线（例如，从一步一步，从开始到结束）不起作用。这三个图像需要同时位于同一个位置。

我想使用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>

标签： csscss-animationscss-transitionscss-transformskeyframe

解决方案

我不确定我是否理解您的图像，因为它说第二张图像应该消失，但它也说动画是无限的。我希望它按您的预期工作，如果不只是对需要修复的内容发表评论。

我正在使用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>

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

问题描述

解决方案

推荐阅读