Animated properties of CSS3

Transition, animation and transform are important attributes of the three animated animations in CSS3, and this article focuses on learning about them.

First, transition

transitionAllows the CSS property values to smoothly transition within a certain time interval. This effect can be triggered by clicking on the mouse, getting focus, being clicked, or any change to the element, and animating the CSS property values in a sleek and animated manner.

Transition:transition-property | | transition-duration | | transition-timing-function | | Transition-delay;

transitionIt consists of four property values: The properties of the transformation:, the time of the transformation continuation:, the transition-property transition-duration rate change of the transformation during the continuation period: transition-timing-function , the transformation delay time: transition-delay .

1. Transition-property

Transition-property:none | | all | | Property

transition-propertyis used to specify the effect to be performed when one of the attributes of an element changes transition .

None: No attributes will get a transition effect;

All: The transition effect is the default value for all properties;

Property: A list of CSS attribute names that define the transition effect applied, separated by commas.

2. Transition-duration

Transition-duration:time;

transition-durationis used to specify the duration of the element conversion process, the value time is a numeric value, in S (seconds) or MS (milliseconds), the default value is 0, that is, the transformation is instantaneous.

3. Transition-timing-function

Transition-timing-function:linear | | Ease | | ease-in | | Ease-out | | Ease-in-out | | Cubic-bezier (N,n,n,n);

The above specific value meanings are as follows:

value	Description
Linear	Specifies the transition effect that starts at the same speed to the end.
Ease	A transition effect that specifies a slow start, then gets faster, and then ends at a slow speed.
Ease-in	Specifies a transition effect that starts at a slow speed.
Ease-out	Specifies a transition effect that ends at a slow speed.
Ease-in-out	Specifies a transition effect that starts and ends at a slow speed.
Cubic-bezier (n,n,n,n)	Define your own values in the Cubic-bezier function. The possible values are numbers between 0 and 1.

4. Transition-delay

Transition-delay:time;

transition-delayis used to specify the time at which an animation starts executing, that is, how long it takes to start an effect after changing the attribute value of an element, transition the value of time is a number, in s (seconds) or MS (milliseconds), and the default size is "0", that is, the transform executes immediately without delay.

5. Example

HTML code

<class= "One"></div>

CSS Code

. One{width:100px;Height:100px;margin:200px Auto;Background-color:#cd4a48;-webkit-transition:width, height 2s ease;-moz-transition:width, height 2s ease;-ms-transition:width, height 2s ease;-o-transition:width, height 2s ease;transition:width, height 2s ease; }. One:hover{width:300px;Height:300px; }

Effect:

6. Precautions

• Not all CSS properties are supported transition , the full list is viewed here, as well as specific effects.
• transitionYou need to know the exact values of the start and end states in order to calculate the intermediate state. For example, height changes from 0px to 100px, which transition can be used to calculate the intermediate state. However, transition there is no way to calculate the intermediate state of 0px to auto, that is, if the start or end setting is Height:auto, then there is no animation effect.
• transitionEvent triggering is required, so it can't happen automatically when the page loads.
• transitionis disposable and cannot be repeated unless triggered repeatedly.

Second, animation

Unlike transition defining only the first two states, animation you can define as many keyframes as possible, thus enabling more complex animation effects.

Animation:animation-name | | animation-duration | | animation-timing-function | | Animation-delay | | Animation-iteration-count | | Animation-direction

animationIt consists of six attributes, which are as follows:

value	Description
Animation-name	Specifies the name of the keyframe that needs to be bound to the selector:
Animation-duration	Specifies the amount of time, in seconds or milliseconds, that the animation will take to complete.
Animation-timing-function	Specifies the speed curve of the animation.
Animation-delay	Specifies the delay before the animation starts, and the default value is 0.
Animation-iteration-count	Specifies the number of times the animation should play, with the default value of 1.
Animation-direction	Specifies whether the animation should be rotated in reverse, and the default value is forward.

1. Keyframe

animationbefore you introduce the specific use, you should first introduce keyframe.

@keyframesLets developers control the intermediate links of CSS animations by specifying the keyframe style (or dwell point) that must be present at a specific point in the animation. This allows the developer to control more details in the animation than to let the browser handle it all automatically.

To use keyframes, first create a rule with a name @keyframes so that subsequent use animation-name of this property invokes the specified @keyframes . Each @keyframes rule contains multiple keyframes, that is, a piece of Style block statement, each keyframe has a percentage value as the name, represented in the animation, At which stage to trigger the style that the frame contains.

KeyFrames are written in an order that is not required and will only be triggered in small to large orders based on percentages.

{Keyframes-selector {css-styles;} }

The specific meanings are as follows:

value	Description
Animationname	Necessary. Defines the name of the animation.
Keyframes-selector	Necessary. The percentage of the animation duration. Valid value: 0-100%from (same as 0%) to (same as 100%)
Css-styles	Necessary. One or more valid CSS style attributes.

Example:

{  0% {top: 0; left: 0px}  { top: 30px;  left: 20px; }  { top: 0; left: 30px;} }

2. Example

HTML code

<div class= "One" ></div>

CSS Code

. One{width:100px;Height:100px;margin:200px Auto;Background-color:#cd4a48;position:relative;Animation:movehover 5s Ease-in-out 0.2s; }@keyframes Movehover{0% {Top:0px; Left:0px;background:#cd4a48; }50%{Top:200px; Left:200px;background:#A48992; }100%{Top:350px; Left:350px;background:#FFB89A; }    }

Effect:

3. Other properties

In addition to the above-mentioned six properties, additional two properties are described.

Animation-fill-mode

When the animation finishes, it jumps from the end state to the start state immediately. If you want to keep the animation in the end state, you need to use animation-fill-mode properties.

Animation-fill-mode:none | | Backwards | | Both

• None: The default value, which returns to the state when the animation is not started.
• Forwards: When the animation is complete, keep the last property value (defined in the last Keyframe).
• Backwards: animation-delay applies the start attribute value (defined in the first keyframe) for a specified period of time before the animation is displayed.
• Both: animation-direction apply forwards and backwards rules according to rotation.

Animation-play-state

Sometimes, the animation will stop abruptly during playback. At this point, the default behavior is to jump back to the start state of the animation.

If you want the animation to remain in the state when it suddenly terminates, use the animation-play-state property.

animation-play-state:running | | Paused

animation-play-stateIt is mainly used to control the playback state of element animations. There are mainly two values, running and paused where running is the default value. The animation that is being played is stopped by paused, and the paused animation is re-played by running, which is currently rarely supported by the kernel.

Third, transform

transformis the transformation, which consists mainly of rotating rotate, twisting skew, scaling scale and moving translate , and matrix deformation matrices.

Transform:none | | Transform-functions

None: Indicates not to enter the transformation; Transform-function represents one or more transform functions, separated by spaces; in other words, we operate on multiple properties of an element transform, such as rotate, scale, translate, three.

The main transform-function transform functions are as follows:

1. Translate

value	Description
Translate (x,y)	Defines a 2D transformation.
Translate3d (x,y,z)	Defines a 3D transformation.
TranslateX (x)	Define the conversion, just with the value of the X-axis.
Translatey (y)	Define the conversion, just use the Y-axis value.
Translatez (z)	Defines a 3D conversion, just using the Z-axis value.

2. Scale

value	Description
Scale (x,y)	Defines a 2D scaling transformation.
Scale3d (x,y,z)	Defines a 3D scaling transformation.
ScaleX (x)	Define the zoom transformation by setting the value of the X-axis.
ScaleY (y)	Define the zoom transformation by setting the value of the Y-axis.
Scalez (z)	Define a 3D scaling transformation by setting the value of the Z-axis.

3. Rotate

value	Description
Rotate (angle)	Defines the 2D rotation, which specifies the angle in the parameter.
Rotate3d (x,y,z,angle)	Defines the 3D rotation.
Rotatex (angle)	Defines the 3D rotation along the X-axis.
Rotatey (angle)	Defines a 3D rotation along the Y-axis.
Rotatez (angle)	Defines a 3D rotation along the Z-axis.

4. Skew

value	Description
Skew (x-angle,y-angle)	Defines a 2D tilt transition along the X and Y axes.
SKEWX (angle)	Defines a 2D tilt transition along the X-axis.
Skewy (angle)	Defines a 2D tilt transition along the Y-axis.

5. Transform-origin

The default reference point for the above changes is the center point of the element, but you can transform-origin set the reference point for the element.

transform-origin:x | | Y | | Z

where x, y and Z correspond to three-dimensional coordinates, the value of x, Z can be em,px. In addition, X, y can be a percent value, where × can also be a character parameter left,center,right. Y and X can also set the character value Top,center,bottom in addition to the percent score.

The specific example is no longer written, the situation is more, the implementation is relatively simple.

Iv. Summary

The above is about the CSS3 animation in the three properties, the content is relatively basic, but it is very practical. Just need CSS, can achieve some simple animation effect, save the complex JS code.

Animated properties of CSS3