CSS3 Practice Picture Carousel (Transform,transition and animation)

Original: CSS3 Practice picture Carousel (Transform,transition and animation)

Landlord like the pursuit of visual enjoyment, although often at the expense of performance can not be compatible at the cost but also bored. This article through a demo demo to simply understand the next CSS3 under the Transform,transition and animation.

This article needs to achieve the effect: ( Please open with chrome )

1. Picture Carousel
2. Picture Automatic Carousel

Transform

As I understand it, transform and width, height, and background are all properties of the DOM, unlike the CSS3, which can move, scale, rotate, lengthen, or stretch the original DOM elements. With some of the API on the canvas in a likeness, so transform seems to be able to do something JS can do.

Transform 2D Transform and 3D transformation, W3school has a good introduction and examples, specifically, poke: CSS3 2D conversion CSS3 3D Conversion

To make it easier to find, I'll keep a copy of the W3school on it:

Transition

Transition's explanation is the transition, my understanding is the transformation between CSS, but this transformation is very smooth, like animation. To raise a chestnut, the first class of a DOM is ClassA, through some kind of operation (such as being clicked) into the CLASSB, if there is no transition, the transformation between the class is very fast, mechanical instantaneous completion, but with transition, This will be a very smooth process.

We use demo to explain how transition is used.

Write the following HTML file:

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><style type=" text/css "></style>  

Open up is a very simple picture, plus CSS:

img {  -webkit-transition:all 1s ease-in-out 0s;} Img:hover {  -webkit-transform:     rotate (360deg) scale    (0.5, 0.5);  opacity:0;}

Effect please poke: Transition transform (PS: All demo are not compatible please open with chrome )

Is it simple? In the demo, you only need to set the image (IMG tag) of the original properties and hover properties, the middle of the transformation process is all done by transition! And transition is added under an element (the demo's transition is added under the IMG tag), as if a listener, once the attribute value of the element will be changed, will automatically check the settings in the Transition property, once the discovery matches, The transition is smooth.

Transition has 4 attributes, Syntax:Transition: Property duration timing-function delay the front-to-back 4 attributes are then interpreted as "properties of the Transition animation transformation", "transition time Spent", "speed change of transition process" and "wait time before transition starts" (default: all 0 ease 0 The first two are required and the last two can be omitted).

If not all of the properties are to smooth the transition, or the various properties of the transition time, speed, and other settings are required, you can have to transition the attributes separated by commas, the demo can be written as:

img {  -webkit-transition:     -webkit-transform 1s ease-in-out 0s,    opacity 1s ease-in-out 1s;} Img:hover {  -webkit-transform:     rotate (360deg) scale    (0.5, 0.5);  opacity:0;}

If you have to write the four attributes of transition separately, you can:

img {  -webkit-transition-property:-webkit-transform, opacity;  -webkit-transition-duration:1s;  -webkit-transition-timing-function:ease-in-out;  -webkit-transition-delay:0s;}

I put the last three attributes together to write only one value (because of the same value), you can also be separated as a property to write a comma separated.

Here we introduce the value of the timing-function . Six big values: (or steal figure W3cschool)

Summary: General transition application in the DOM class transformation, you can write a mechanical transformation, and then add the transition effect.

Animation

Animation's explanation is animated, enhanced version of the transition.

If transition can achieve some JS effect, animation is more like JS. Similar to writing a canvas effect, for example, how much time can we specify when the scene should appear, and the conversion between the scenes is entirely up to CSS3 itself, and keyframes is like defining a JS method.

The main application in an element requires continuous n-times CSS transformations. A simple demo is as follows: Animation animation

When we create an animation in @keyframes, bind it to a selector, otherwise it will not animate.

You can bind an animation to a selector by stipulating at least the following two CSS3 animation properties:

1. Specify the name of the animation
2. Specify the duration of the animation

Demo Code:

<Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><styletype= "Text/css">img{    /*-webkit-animation:myfirst 5s;*/  }@-webkit-keyframes Myfirst{0% {-webkit-transform:Rotate (0deg) scale (1, 1);Opacity:1;    }50%{-webkit-transform:Rotate (360deg) scale (0.5, 0.5);Opacity:0.5;    }100%{-webkit-transform:Rotate (0deg) scale (1, 1) Translate (300px, 200px);Opacity:1;    }} img{-webkit-animation:myfirst 5s linear 0s 1 alternate;    /*stop at the end position*/-webkit-animation-fill-mode:forwards;  }</style>  <imgsrc= ' Http://hanzichi.github.io/img/img0.png '/>

View Code

More please poke CSS3 animation

Specific applications: Picture Carousel

Similar applications can write code without transitions before adding transition between class conversions.

The demo (Picture Auto-carousel) and transition about the core code on a few lines, and JS is simply the element of the class assignment, the animation process is completed by CSS3!

img {  position:absolute;  -webkit-transition:all 2s ease-out;}. disappear {  opacity:0;}. Show {  opacity:1;}

Transition animations for transition settings are performed when the class of IMG is converted from show to disappear or from disappear to show (the class transform under the IMG tag).

Another demo implementation is similar, interested can refer to the source code: source Please poke

Summarize

In general, transform just add some attributes to the DOM, and if paired with transition or animation can do some animation, I think the actual application more should be transition, can match pseudo-class or click events.

The landlord of the above understanding is not deep, such as discrepancies, please also point out.

For more information, refer to this CSS3 transitions, transforms and animation usage profile and application Showcase

CSS3 Practice Picture Carousel (Transform,transition and animation)