CSS3 attributes transition, animation, transform

This time I will bring you the properties of CSS3transition, animation, and transform. What are the precautions for using the CSS3 properties transition, animation, and transform? The following is a practical case. Get up and take a look.

Recently, in response to the company's needs, I need to use css3 to make animation. I finally understand the three attributes that I had been confused about before.

Simply make a simple comparison here to deepen your memory.

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 */

CSS3 animation property ##Internet Explorer 10, Firefox and Opera Support 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 */

##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;

Other comparisons

Transition and animation belong to animation properties , transform belongs to the static

attribute.

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 to define the number of times the animation is played , one is to define whether the animation is played in reverse in turn
Abbreviated form comparison:

Transition attribute: transition, that is, the transition of the css change process, so define the transition attribute The meaning is that when the transition attribute is defined and changes, it will be transformed according to the animation of this transition, rather than a rigid direct transformation, which 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;}
}

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

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:

How to make a 0.5 pixel line in css

css3 Transition smooth transition menu bar implementation

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