Comprehensive comparison of CSS3 animation-related attributes transition, animation, and transform-CSS Tutorial-php.cn

Comprehensive comparison of CSS3 animation-related attributes transition, animation, and transform

小云云

Release： 2017-12-12 09:39:32

Original

1636 people have browsed it

Transition, animation, and transform are sometimes unclear. This article mainly introduces the comparison of CSS3 animation-related attributes transition, animation, and transform. Through browser compatibility, usage, and comparison, the similarities and differences between them are more deeply demonstrated. You can check the detailed explanation below for the specific operation steps. Interested friends can refer to it. I hope it can help everyone.

Browser Compatibility

##CSS3 transform property

Internet Explorer 10, Firefox, and Opera support the transform attribute.

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

Safari and Chrome support alternative -webkit-transform properties (3D and 2D transforms).

Opera only supports 2D conversion.

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

Copy after login

CSS3 animation property ##Internet Explorer 10. Firefox and Opera support the animation attribute.

Safari and Chrome support an alternative -webkit-animation attribute.

Note: Internet Explorer 9 and earlier versions do not support the animation property.

Usage:

animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */

Copy after login

CSS3 transition propertyInternet Explorer 10, Firefox, Opera, and Chrome support the transition attribute.

Safari supports an alternative -webkit-transition attribute.

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

Usage:

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

Copy after login

##Other comparison

transition and animation It belongs to animation properties, and transform belongs to static properties. According to the understanding of English words: conversion, transformation, transform mainly refers to the conversion of displacement, size, position, and shape. If you directly write the attribute transformation, you will get the transformed shape and position.

Transition and animation are both animation properties, so they have the following

property
duration
timing-function
delay

properties, animation time, animation form, and delay time For animation, the property becomes the name of the animation. The unique properties of animation are:

animation-iteration-count

animation-direction

One is to define the number of times the animation is played, and the other is to define whether the animation is Play in reverse in turn

Comparison of abbreviated forms:

Transition attribute: transition, that is, the transition in the process of css change, so the meaning of defining the transition attribute is, when defined If the properties of the transition change, they will be transformed according to the animation of the transition, rather than a rigid direct transformation. This provides a good way for animation. 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 means that all changes in attributes will be changed according to this transition
animation writing method:
-webkit-animation: tang1 0.5s ease 0s infinite alternate;
animation: tang1 0.5s ease 0s infinite alternate;
Abbreviated form, animation is followed by the number of animations and whether to play in reverse in turn

The one starting with animation is the name of the animation , so here we need to first define how the animation transforms:

@keyframes tang1
{
from {left:0px;}
to {left:200px;}
}

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

Copy after login

Due to browser compatibility, this must also be written when defining the animation.

from represents 0% time, to represents 100% time.

Related recommendations:

Instance analysis of the transition attribute in CSS3

Transition mainly includes an introduction to four attribute values

Tutorial on the use of animation animation in css

Compare the differences and connections between transition and animation in css3

##CSS3 Detailed introduction about transform

The above is the detailed content of Comprehensive comparison of CSS3 animation-related attributes transition, animation, and transform. For more information, please follow other related articles on the PHP Chinese website!