我正在尝试校正纯CSS中三个图像的无限翻转，旋转，旋转和消失的动画持续时间和时间线 [英] I'm trying to correct the animation duration and timeline of infinite flip, rotation, spin and disappearance of three images in pure CSS

问题描述

我测试了以下答案：

• 
  
  

    .flipping-images {align-items：center;显示：flex; flex-flow：行nowrap;高度：80％证明内容：中心； / *不透明度：0； * /职位：相对；转换：translateX（100％）;宽度：22％; } .show-l {动画：show-image 5s无限宽300ms；左：0；位置：绝对； transform-origin：left;}。hide-l {动画：hide-image 5s缓入800ms无限；位置：绝对； transform-origin：left;}。hide-l2 {动画：hide-image 5s缓入600ms无限；位置：绝对； transform-origin：right;} @ keyframes隐藏图像{0％{left：0;变换：rotateY（0deg）; } 30％{剩余：10％；变换：rotateY（0deg）; } 50％{不透明度：1； } 100％{左：-100％；不透明度：0；变换：rotateY（90deg）; }} @ keyframes show-image {0％{左：100％;变换：rotateY（90deg）; } 30％{左：110％;变换：rotateY（90deg）; } 100％{左：0％;变换：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>  

  解决方案

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

  
  
  

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

  
  
  

    var计数器= 1; var div = document.querySelector（'。flipping-images'）; var images = document.querySelectorAll（'。flipping-images img'）; var showNext = function（）{counter ++;如果（counter> 3）counter = 1; div.classList.remove（'image1'，'image2'，'image3'）div.classList.add（'image'+ counter）;};用于（图像的可变img）{img.addEventListener（'animationend'，showNext ）; img.addEventListener（'click'，showNext）;} document.querySelector（'＃next'）。addEventListener（'click'，showNext）;  

    .flipping-images {透视图：300px;}。flipping-images img {显示：无；动画：旋转5s线性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）{动画：旋转5s线性无限；} @关键帧旋转{0％{变换：rotateY（-45deg）; } 100％{变换：rotateY（45deg）; }}按钮{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>  

  
  

  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>

  解决方案

  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>

  这篇关于我正在尝试校正纯CSS中三个图像的无限翻转，旋转，旋转和消失的动画持续时间和时间线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！