How to implement infinite carousel animation in css (code example)

The content of this article is how to realize the automatic infinite playback carousel animation effect. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the previous article [How to achieve the rotation display effect of images with css], we introduced the production of manual infinite carousel images. In this article, we will take a look at the automatic infinite carousel image animation. Make. Let's take a look at how the animation effect is achieved.

1. Set the stage for animation

HTML is very similar to the example in the previous article. We are going to have a stage (#stage) where the animation will occur, a div container that will rotate and a series of images:

<div id="stage">
     <div id="rotator" style="-webkit-animation-name: rotator;">
          <a href="1.jpg"><img  src="1.jpg"    style="max-width:90%" alt="How to implement infinite carousel animation in css (code example)" ></a>
          <a href="2.jpg"><img  src="2.jpg"    style="max-width:90%" alt="How to implement infinite carousel animation in css (code example)" ></a>
          <a href="3.jpg"><img  src="3.jpg"    style="max-width:90%" alt="How to implement infinite carousel animation in css (code example)" ></a>
          <a href="4.jpg"><img  src="4.jpg"    style="max-width:90%" alt="How to implement infinite carousel animation in css (code example)" ></a>
          <a href="5.jpg"><img  src="5.jpg"    style="max-width:90%" alt="How to implement infinite carousel animation in css (code example)" ></a>
          <a href="6.jpg"><img  src="6.jpg"    style="max-width:90%" alt="How to implement infinite carousel animation in css (code example)" ></a>
          <a href="7.jpg"><img  src="7.jpg"    style="max-width:90%" alt="How to implement infinite carousel animation in css (code example)" ></a>
          <a href="8.jpg"><img  src="8.jpg"    style="max-width:90%" alt="How to implement infinite carousel animation in css (code example)" ></a>
     </div>
</div>

The inline style attribute references the following animation @keyframes. It needs to be inline rather than CSS so that we can stop and restart the animation using JavaScript.

2. Arrange photos in 3D space

CSS style is used to position multiple photos, first rotating them around the y-axis (turning the page vertically upward), and then radially Pan Outward:

  #stage {
    margin: 2em auto 1em 50%;
    height: 140px;
    -webkit-perspective: 1200px;
    -webkit-perspective-origin: 0 50%;
  }
  #rotator a {
    position: absolute;
    left: -81px;
  }
  #rotator a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    -webkit-backface-visibility: hidden;
  }
  #rotator a:nth-of-type(1) img {
    -webkit-transform: rotateY(-90deg) translateZ(300px);
  }
  #rotator a:nth-of-type(2) img {
    -webkit-transform: rotateY(-60deg) translateZ(300px);
  }
  #rotator a:nth-of-type(3) img {
    -webkit-transform: rotateY(-30deg) translateZ(300px);
  }
  #rotator a:nth-of-type(4) img {
    -webkit-transform: translateZ(300px);
    background: #000;
  }
  #rotator a:nth-of-type(5) img {
    -webkit-transform: rotateY(30deg) translateZ(300px);
  }
  #rotator a:nth-of-type(6) img {
    -webkit-transform: rotateY(60deg) translateZ(300px);
  }
  #rotator a:nth-of-type(n+7) { display: none; }

Photo Settings - A value of 81px represents a leftward movement, centering the forward-facing photo on the axis of rotation. The distance is half the image width (140px/2) plus LHS image padding (10px) and border (1px).

This stage requires setting up a three-dimensional animation. The stage starts from the center of the page, so the anchor element under the rotation element needs to be moved backwards to center the animation.

We only started preparing six photos, three on the left, one in the middle, and two on the right. The leftmost photo (position 1) starts from the left and is therefore only visible after the first rotation.

When the photo rotates, it disappears (display: none) and a new photo is attached to the left, ready to be rotated from position 1. There can be any number of photos at 7 and higher. They will only appear when they are moved to a visible position.

You can even use Ajax to load new photos while the animation is in progress.

3. Add animation effects

As we tried before, instead of rotating the photo wheel a full 360 degrees, all we actually did was rotate it 30 degrees ( enough to go from one photo to the next):

  @-webkit-keyframes rotator {
    from { -webkit-transform: rotateY(0deg);  }
    to   { -webkit-transform: rotateY(30deg); }
  }
  #rotator {
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 1s;
  }
  #rotator:hover {
    -webkit-animation-play-state: paused;
  }

To make keyframes work in other browsers, copy all styles, replace -webkit- with -moz- and -ms- as below The sample code block is shown.

When the animation completes, it fires a JavaScript event, which you can read about in the next section. The event handler moves along the photo so that when the animation resets, instead of going back to the initial state, the photo moves one step around the circle.

To give a clearer picture of what's going on, the center photo has been highlighted in the demo below. As the animation occurs, you will see the highlighted node rotate and then reset back to the starting position, but with a different photo.

4. JavaScript Add Animation Controller

We need JavaScript in this example to detect when the animation ends in order to coordinate the photo moving through the wheel reset. Without this, the wheel would just alternate between the first two photos.

document.addEventListener("DOMContentLoaded", function() {
    var rotateComplete = function() {
      target.style.webkitAnimationName = "";
      target.insertBefore(arr[arr.length-1], arr[0]);
      setTimeout(function(el) {
        el.style.webkitAnimationName = "rotator";
      }, 0, target);
    };
    var target = document.getElementById("rotator");
    var arr = target.getElementsByTagName("a");
    target.addEventListener("webkitAnimationEnd", rotateComplete, false);
}, false);

For every WebKit style and other reference, there are alternatives to Firefox (-moz- or Moz), Opera (-o- or O), and even Internet Explorer (-ms- or ms) - we The chaos that must be endured until the standards are finalized.

To use this feature in Safari, Chrome, Firefox, Opera and Internet Explorer 10, we need to include the following additional settings:

  var rotateComplete = function() {
    with(target.style) {
      webkitAnimationName = MozAnimationName = msAnimationName = "";
    }
    target.insertBefore(arr[arr.length-1], arr[0]);
    setTimeout(function(el) {
      with(el.style) {
        webkitAnimationName = MozAnimationName = msAnimationName = "rotator";
      }
    }, 0, target);
  };
  var target = document.getElementById("rotator");
  var arr = target.getElementsByTagName("a");
  target.addEventListener("webkitAnimationEnd", rotateComplete, false);
  target.addEventListener("animationend", rotateComplete, false);
  target.addEventListener("MSAnimationEnd", rotateComplete, false);

It's not clear why setTimeout is needed. We don't need it to set the delay because it's done with CSS, but without setTimeout (even 0ms) the animation cannot be retriggered.

5. Effect display

#This is just a horizontal carousel. In the following article [CSS realizes three-dimensional Rotating infinite carousel animation】In this article, we will improve the carousel method and create different carousel animations based on this article.

The above is the detailed content of How to implement infinite carousel animation in css (code example). For more information, please follow other related articles on the PHP Chinese website!