Css-transform-transition-animation

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 transformations and 3D transformations, there are good introductions and examples in W3school

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.

Transition has 4 properties : 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).

Transition properties:

Properties	Description	CSS
Transition	Shorthand property, which is used to set four transition properties in one property.	3
Transition-property	Specifies the name of the CSS property that the transition is applied to.	3
Transition-duration	Defines the time that the transition effect takes. The default is 0.	3
Transition-timing-function	A time curve that specifies the transition effect. The default is "ease".	3
Transition-delay	Specifies when the transition effect begins. The default is 0.	3

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.

animated properties:

Properties	description	CSS
@keyframes	specify animation.	3
animation	The shorthand properties of all animated properties, in addition to the Animation-play-state property.	3
animation-name	Specifies the name of the @keyframes animation.	3
animation-duration	Specifies the seconds or milliseconds that the animation takes to complete a cycle. The default is 0.	3
animation-timing-function	Specifies the speed curve of the animation. The default is "ease".	3
animation-delay	Specifies when the animation will start. The default is 0.	3
animation-iteration-count	Specifies the number of times the animation has been played. The default is 1.	3
animation-direction	Specifies whether the animation will play backwards in the next cycle. The default is "normal".	3
animation-play-state	Specifies whether the animation is running or paused. The default is "running".	3
animation-fill-mode	Specifies the state outside of the animation time of the object.	3

Css-transform-transition-animation