Transition allows the CSS property values to smoothly transition within a certain timeframe, with the following syntax:
Transition:transition-property transition-duration transition-timing-function transition-delay [, ...]
- Transition-property
Used to specify the property that performs the transition effect, either none
, all
or a specific property.
- Transition-duration
The duration of the animation execution, in s(秒)
or ms(毫秒)
.
- Transition-timing-function
Transform rate effect, optional value is ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(自定义时间曲线)
.
- Transition-delay
Used to specify the time at which the animation starts executing, with the same value transition-duration
, but can be negative.
Transform is divided into 3D and three, here for the time being only the more commonly used 2D transform, which mainly consists of the following transformations: rotation rotate, twisted skew, scaled scale and moving translate, and matrix deformation matrices, The syntax is as follows:
Transform:rotate | Scale | Skew | Translate |matrix;
Rotate rotation
The rotate is a deg 度
positive number indicating a clockwise rotation and a negative number for counterclockwise rotation.
Scale Scaling
The value range for scale is 0~n
less than when it is smaller 1
, and vice versa. For example, the scale(0.5, 2)
horizontal direction is reduced by 1 time times, the vertical direction is enlarged by 1 time times, or it can be scaleX
set in scaleY
One Direction.
Skew Twist
Skew's units are the rotate
same deg 度
. For example skew(30deg, 10deg)
, it indicates a horizontal tilt of 30 degrees and a vertical tilt of 10 degrees.
Translate offset
Offsets also include horizontal and vertical offsets. translate(x,y)
move horizontally and vertically (that is, the X and Y axes move simultaneously), move translateX(x)
horizontally (x-axis) only, and translateY(Y)
move vertically (Y-axis movement).
CSS3 in the animation is controlled by a call, Keyframes 关键帧
his name is "@keyframes" beginning, followed by the "name of the animation" plus a pair of curly braces "{}", in parentheses is a number of different time-period style rules, Sort of like our CSS style. For a style rule in a "@keyframes" is made up of a number of percentages, such as "0%" through "100%", the syntax is as follows:
@keyframes IDENT {from { properties:properties value; } Percentage { properties:properties value; } To { properties:properties value; }} Or all written in percent form: @keyframes IDENT { 0% { properties:properties value; } Percentage { properties:properties value; } 100% { properties:properties value; }}
Animation and transition have their own corresponding properties, then there are several main animation in the following: Animation-name;animation-duration; Animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state. Some of these properties are explained below:
-
- Animation-name Key frame Name
Used to define the name of an animation, that is, the animation name created by the previous, the keyframes
default is none
, when the value is, none
there will be no animation effect. If we want to attach animation
a few to an element at the same time, just separate it with a comma ,
.
- Animation-iteration-count Animation cycle times
The default is 1
, if you want to make an infinite loop, just set it to true infinite
.
- Animation-direction the direction of animation playback
It has only two values, the default is normal
, if set to normal, each cycle of the animation is played forward, and the other value is that the alternate
animation plays forward in an even number of times, and the odd number plays in the opposite direction.
- Animation-play-state Playback Status
Its main has two values, running and paused, where running is the default value. You can stop the animation that is playing by paused, or you can replay the paused animation by running. This property is not commonly used.
DEMO 1
DEMO 2
DEMO 3
CSS3 innocently divided transition, transform and animation