Css3 transition animation nick, css3transition

Css3 transition animation nick, css3transition

It's just a short time, and it's Saturday again. Today, I want to write a bit of css that people may look down!

Conversion and conversion attributes:

Browser Prefix:
-Webkit-transform;-o-transform;-moz-transform;-ms-transform;
Valid value:
None: Default Value, no conversion operation
Transform-function: A group of conversion functions
Transform: function 1 () function 2 ()......;

Conversion origin transform-origin

Before the origin is not specified, the default origin is the center of the element.
Value: Value/percentage/keyword
One Value: All axis positions
Two values: X axis and Y axis
Three values: X axis, Y axis, and Z axis

2D conversion 2D displacement

Function:Translate ()
Valid value:
Translate (x): only move the x axis (horizontal)
Translate (x, y): Move the x and y axes.
Direction:View symbols

+ Right and down
-Left and up

Note:

The value can be a value, a percentage, or a negative number.
Unidirectional displacement function:
TranslateX (x): only move the x axis
TranslateY (y): only move the y axis

Zoom

Change element size
Function:Scale ()
Valid value:
1 Value: indicates that the first value is equal to the second value.
2 values: first x second y
Unidirectional scaling function:
ScaleX (x), scaleY (y)
Valid value:
The default value is 1.
Zoom in: decimal point between 0 and 1
Zoom in: a value greater than 1

Rotate

Function:Rotate ()
Valid value:Rotate (NDeg)
N:Specific angle value
If n is positive, it rotates clockwise.
If n is negative, it is rotated counterclockwise.

Skew

Function:Skew ()
Skewx () -- X axis skew
Skewy () -- Y axis skew

Transition attributes

Purpose:Specifies which css attributes of an element will have a transitional effect (required)
Attribute:Transition-property
Valid value:None | all | property
Eg:Transition-property: background;
Eg:Transition-property: background, width, height;

Transition Time

Purpose:Specifies how long the transition effect will be completed.
Note:Can take s | MS as the unit. This attribute cannot be omitted, once omitted, there is no transition effect
Attribute:Transition-duration
Valid value:S | MS
Eg:Transition-duration: 5 s;
Eg:Transition-duration: 5 s, 1 s, 1 s;

Transition time speed curve function

Purpose:Defines the speed of the entire transition effect. For example, fast, slow, slow, or even
Attribute:Transition-timing-function
Valid value:Pre-defined value or Bessert Curve
Labels:Default Value: starts at a slow speed and ends at a slow speed.
Linear:Uniform speed
Callback-in:Slow start, acceleration effect
Outbound-out:Slow end (Quick Start), slow down effect
Callback-in-out:Slow start and end. add and subtract in the middle
Eg:Transition-timing-function: linear;

Transition Delay

Purpose:How long does it take to start performing the transition after initiating the transition operation?
Attribute:Transition-delay
Valid value:Time in seconds | ms
Eg:Transition-delay: 5 s;

Short for transition attribute transition

Attribute:Transition
Valid value:List of values separated by Spaces
Property duration timing-function delay;
Eg:Transition: background 1 s linear 0 s;
Transition: background 1 s;
Multiple transition effects:
Transition: background 1 s linear 0 s,
Color 2 s linear 0 s,
Border-radius 3 s linear 1 s;

Animation

See w3c for detailed animation parameters!

Note the following points:

@ Keyframes Syntax: (write separately, inside the style outside the selector) @ keyframes name {from {css style;} percent {css style;} to {css style ;}} animation Syntax: (written in the selector) animation: name duration timing-function delay iteration-count direction;

Animation-fill-mode

(Ie10 +) attribute specifies whether the animation effect is visible before or after playback.

None -- do not change the default behavior.

Forwards-- When the animation is complete, keep the last attribute value (defined in the last key frame ).

Backwards -- apply the start attribute value (defined in the first key frame) before the animation is displayed within the period specified by animation-delay ).

Both -- both the forward and backward fill modes are applied.

It's almost the same. Go directly to the code!

<! DOCTYPE html> Finally, the effect is displayed!