Shulou(Shulou.com)06/01 Report--

This article mainly introduces css how to achieve infinite broadcast picture animation, the article introduces in great detail, has a certain reference value, interested friends must read it!

1. Set the stage for animation

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

The inline style attribute refers to the following animation @ keyframes. It needs to be inlined instead of CSS so that we can use JavaScript to stop and restart the animation.

2. Arrange photos in 3D space

The CSS style is used to position multiple photos, first rotate them around the y-axis (page up vertically), and then translate radially outward:

# stage {

Margin:2emauto1em50%

Height:140px

-webkit-perspective:1200px

-webkit-perspective-origin:050%

}

# rotatora {

Position:absolute

Left:-81px

}

# rotatoraimg {

Padding:10px

Border:1pxsolid#ccc

Background:#fff

-webkit-backface-visibility:hidden

}

# rotatora:nth-of-type (1) img {

-webkit-transform:rotateY (- 90deg) translateZ (300px)

}

# rotatora:nth-of-type (2) img {

-webkit-transform:rotateY (- 60deg) translateZ (300px)

}

# rotatora:nth-of-type (3) img {

-webkit-transform:rotateY (- 30deg) translateZ (300px)

}

# rotatora:nth-of-type (4) img {

-webkit-transform:translateZ (300px)

Background:#000

}

# rotatora:nth-of-type (5) img {

-webkit-transform:rotateY (30deg) translateZ (300px)

}

# rotatora:nth-of-type (6) img {

-webkit-transform:rotateY (60deg) translateZ (300px)

}

# rotatora:nth-of-type (nasty 7) {display:none;}

Photo setting-the value of 81px means to move to the left so that the forward photo is centered on the axis of rotation. The distance is half the width of the image (140px/2) plus the LHS image fill (10px) and frame (1px).

This stage requires three-dimensional animation, and the stage starts from the center of the page, so the anchor element under the rotation element needs to move backward to center the animation.

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

When the photo rotates, it disappears (show: none), and the new photo is attached to the left, ready to rotate from position 1. There can be any number of photos at 7 and higher. They appear only when they move 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, what we actually do is rotate 30 degrees (enough to go from one photo to the next):

@-webkit-keyframesrotator {

From {- webkit-transform:rotateY (0deg);}

To {- webkit-transform:rotateY (30deg);}

}

# rotator {

-webkit-transform-origin:00

-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 and replace-webkit-with-moz- and-ms-, as shown in the sample code block below.

When the animation is complete, it triggers a JavaScript event, which you can read in the next section. The event handler moves along the photo so that when the animation is reset, rather than going back to its original state, the photo moves one step around the circle.

In order to have a better understanding of what is happening, the central photo has been highlighted in the following demonstration. When the animation occurs, you will see the highlighted node rotate and then reset back to the starting position, but with different photos.

4. JavaScript add animation controller

In this example, we need JavaScript to detect when the animation ends in order to coordinate the photos moving through the wheel reset. Without this, the wheels will only appear alternately between the first two photos.

Document.addEventListener ("DOMContentLoaded", function () {

VarrotateComplete=function () {

Target.style.webkitAnimationName= ""

Target.insertBefore (arr [arr.length-1], arr [0])

SetTimeout (function (el) {

El.style.webkitAnimationName= "rotator"

}, 0 dint target)

}

Vartarget=document.getElementById ("rotator")

Vararr=target.getElementsByTagName ("a")

Target.addEventListener ("webkitAnimationEnd", rotateComplete,false)

}, false)

For each WebKit style and other reference, there are alternatives to Firefox (- moz- or Moz), Opera (- o-or O), or even InternetExplorer (- ms- or ms)-the confusion we have to endure until the standard is finally determined.

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

VarrotateComplete=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 dint target)

}

Vartarget=document.getElementById ("rotator")

Vararr=target.getElementsByTagName ("a")

Target.addEventListener ("webkitAnimationEnd", rotateComplete,false)

Target.addEventListener ("animationend", rotateComplete,false)

Target.addEventListener ("MSAnimationEnd", rotateComplete,false)

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

The above is all the content of the article "how to realize Infinite broadcast Picture Animation in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.