Properties of CSS3 Transition, animation, transform

This time to bring you CSS3 attributes transition, animation, transform, the use of CSS3 properties transition, animation, transform note what, the following is the actual case, together to see.

Recently, the company needs, need to use CSS3 to do animation, and finally the past has been silly points not clear the three attributes understood.

Simply make a simple contrast here and deepen your memory.

Browser compatibility

CSS3 Transform Properties

Internet Explorer 10, Firefox, and Opera support transform properties.

Internet Explorer 9 supports an alternative-ms-transform attribute (only for 2D conversions).

Safari and Chrome support alternative-webkit-transform attributes (2D conversion).

Opera only supports 2D conversions.

Transform:rotate (7deg);-ms-transform:rotate (7deg);     /* IE 9 */-moz-transform:rotate (7deg);     /* Firefox */-webkit-transform:rotate (7deg); /* Safari and Chrome */-o-transform:rotate (7deg);     /* Opera */

CSS3 Animation Properties

Internet Explorer 10, Firefox, and Opera support the animation property.

Safari and Chrome support alternative-webkit-animation properties.

Note: The animation property is not supported for Internet Explorer 9 and earlier versions.

Usage:

Animation:mymove 5s Infinite;-webkit-animation:mymove 5s infinite; /* Safari and Chrome */

CSS3 Transition Properties

Internet Explorer 10, Firefox, Opera, and Chrome support the transition properties.

Safari supports an alternative-webkit-transition property.

Note: Internet Explorer 9 and earlier browsers do not support the transition property.

Usage:

Transition:width 2s;-moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s;

Other comparisons

Transition and animation belong to animation properties, transform are static properties.
According to the understanding of English words: conversion, transformation, transform mainly refers to the displacement, size, position, shape of the transformation, directly write the property transformation, the shape and position of the transformation is obtained.
Transition and animation are all animated properties, so they all have the following
Property
Duration
Timing-function
Delay

Properties, animation time, animation form, delay time for Animation,property becomes the name of the animation animation unique properties are:

Animation-iteration-count
Animation-direction
One to define the number of times the animation plays, one to define whether the animation turns the reverse play

Simplified form comparison:

Transition properties: Transitions, that is, the transition of the process of CSS changes, so defining the meaning of the transition attribute is that when the attributes of the transition are defined, the changes are made according to the animation of the transition, rather than the blunt direct transformation, This provides a great way to animate. Generally we write:
-webkit-transition:all 0.85s ease-in 0.1s;
-o-transition:all 0.85s ease-in 0.1s;
-moz-transition:all 0.85s ease-in 0.1s;
Transition:all 0.85s ease-in 0.1s;
All the changes in all of these properties will change according to this transition.
Animation notation:
-webkit-animation:tang1 0.5s ease 0s infinite alternate;
animation:tang1 0.5s ease 0s infinite alternate;
Short form, animation after the number of animations and whether to rotate the reverse play

Animation starts with the animated name, so here we'll first define how the animation is transformed:

@keyframes tang1{from {left:0px;} to {left:200px;}} @-webkit-keyframes tang1/*safari and chrome*/{from {left:0px;} to {left:200px;}}

Because of browser compatibility, this is also written when you define an animation.
When the from represents 0%, to represents the time of 100%.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:

How CSS makes 0.5-pixel lines

CSS3 Transition Smooth Transition menu bar implementation