HTML CSS Note warp effect-transition effect-animation effect

A Transform
CSS3 provides an element deformation effect, also called a transform. It enables the ability to rotate, scale, and pan elements. There are two properties: Transform and Transform-origin.

For the property value of transform, the following table is specified:

Move 200 pixels horizontally and vertically, or you can use percentages
Transform:translate (200px,200px);

Pan 200 pixels horizontally, no later 0 can also

Transform:translate (200px,0); Transform:translatex (200px);

Pan 200 pixels vertically
Transform:translate (0,200px); Transform:translatey (200px);

1.5 times times Transform:scale (1.5) in horizontal and vertical direction; Transform:scale (1.5,1.5);

0.8 times-fold reduction in horizontal and vertical direction
Transform:scale (0.8,0.8);

1.5 times-fold magnification in horizontal direction
Transform:scalex (1.5);

1.5 times-fold magnification in vertical direction
Transform:scaley (1.5);

Rotating elements, between 0 ~ 360 degrees, negative values can be
Transform:rotate ( -45DEG);

Tilt element, between 0 ~ 360 degrees, negative values can be
Transform:skew (45deg, 20deg);

Horizontal tilt element, between 0 ~ 360 degrees, negative values can be
Transform:skewx (45DEG);

Vertical tilt element, between 0 ~ 360 degrees, negative values can be
Transform:skewy (45DEG);

By six values to specify the rectangle, its internal formula calculation is more complex, please Baidu Bar Transform:matrix (1,0,0,1,30,30);

Different values can be accumulated, separated by a space transform:rotate ( -45deg) scale (1.5);

Two Transform-origin
The Transform-origin property allows you to set the starting point for the transformation. By default, the center of the element is used as the starting point. Refer to the following table for specific setup scenarios:

This property is used to change the base point of the transformation, and the default is at the center of the element, if you change the datum point. It will deform according to this datum point.

Default value, deform with center point
Transform-origin:center Center; transform-origin:50% 50%;

Transform-origin:left top is deformed with the upper left corner as the Datum point; transform-origin:0px 0px;

Three Browser version
The minimum version of the Morph effect in CSS3 and the required prefix version are as follows:

Compatible full version
-webkit-transform:rotate (45DEG);
-moz-transform:rotate (45DEG);
-o-transform:rotate (45DEG);
-ms-transform:rotate (45DEG); Transform:rotate (45DEG);

-webkit-transform-origin:left top;
-moz-transform-origin:left top;
-o-transform-origin:left top;
-ms-transform-origin:left top; Transform-origin:left top;

Four. 3D Deformation introduction
As the 3D is three-dimensional, on the basis of the x, Y axis generally will be more than a Z axis, deep jump out of the axis. Below are
The attribute value table for the 3D transformation is as follows:

3D deformation is later than 2D deformation, so if you need to be compatible with the old version of the browser, you can control this table. Specific as follows:

Compatible version end of XXX type
-webkit-transform:translatez (200px);
-moz-transform:translatez (200px);
-o-transform:translatez (200px);
-ms-transform:translatez (200px); Transform:translatez (200px);

Transform-style
The Transform-style property specifies how nested elements are rendered in 3D space.

Generally set to the parent element of the current element transform-style:preserve-3d;
You will need to mate with the following feature properties and deform configurations to see the effect. Similarly, this attribute also needs to be prefixed with various vendors.
Perspective
Perspective is an important attribute of 3D deformation, which sets the viewer's location and maps the visual content to a frustum, which is then placed on a 2D plane.

Sets the distance position of the viewer, typically set on the parent element of the element perspective:1000px;
You will need to mate with the following feature properties and deform configurations to see the effect. Similarly, this attribute also needs to be prefixed with various vendors.

3D Warp Properties
We use the previous 3D function attributes Transform-style and perspective to build the 3D deformation effect.
1.translate3d (x, Y, z)
An HTML structure that requires a 3D displacement must have a parent element containing
<div id= "a" >

</div>

CSS section, parent element set 3D rendering and set perspective distance
#a {
perspective:1000px; transform-style:preserve-3d;
}
IMG {
Z axis can be negative
Transform:translate3d (300px,100px,240px);
}

2.translateZ (z)
You can set the z-axis individually, and the z-axis can be negative
IMG {
Transform:translatez (240px);
}

3.scale3d (x, Y, z)
3D scaling, separate settings not valid, need to fit angle
IMG {
Transform:scale3d (1,1,1.5) Rotatex (45deg);
}

4.scaleZ (z)
Set the z axis individually, and the x and Y axes default to 1 img {
Transform:scalez (1.5) Rotatex (45DEG);
}

5.rotate3d (X,y,z,a)
Set 3D rotation, a for angle, and XYZ to be a value between 0 or 1
Transform:rotate3d (1,0,0,45DEG);

6.rotateX (a), Rotatey (a), Rotatez (a)
Set the 3D rotation Transform:rotatex (45deg) separately; Transform:rotatey (45DEG); Transform:rotatez (45DEG);
Transform:rotatex (45deg) Rotatey (45deg) Rotatez (45deg);

The last Matrix3D is not much to say, ignore.

CSS3 also provides the Perspective-origin property to set the source point angle in 3D transformations. The default value for this property is 50% 50%, which is Center center.

The source point is set to the top right of the warp perspective-origin:top.

CSS3 also provides a value perspective (length value) that sets the pivot in the element, but it is also different from the parent element setting. Because the parent element is the whole as a perspective, and the element itself as a perspective, it causes the difference.
Specific test to see perspective distance img {
Transform:perspective (1000px) Rotatey (45deg);
}

Introduction to Transitions
Transitions typically trigger smooth transitions through a few simple CSS actions, such as: hover,: Focus,
: Active,: checked and so on. CSS3 provides the transition property to implement this transition function, the main attributes are the following table:
We first create an element that has no transition effect and then trigger it by: hover. In the absence of any transition effect, the trigger will be executed immediately and rigidly.
Set element style div {
width:200px; height:200px;
Background-color:white; border:1px solid Green;
}
Background turns black after hover, text turns white div:hover {
Background-color:black; Color:white;

margin-left:50px;
}

Transition-property
First, setting the first property of a transition is the property of the specified transition. Again, you need to specify the two sets of styles you want to transition an element to interact with the user and the page. Then using the Transition-property property, the detailed property values are as follows:

From the list in the door, generally speaking, none is used to have a transition style to cancel. All, however, supports all transition-property styles and one that specifies some of the styles in Transition-property. So what are the styles supported by Transition-proerty? As shown in the following table:


Set background and text color with transition effect
Transition-property:background-color, color, margin-left;
Transition-duration
If you simply set the style of the transition, you won't be able to achieve the effect immediately. The time required for the transition must be added, because the transition time is 0 by default.
Set the transition time to 1 seconds, if half a second can be set to. 5s Transition-duration:1s;

Transition-timing-function
When the transition effect is running, for example, an easing effect is created. By default, the ease is: the element style transitions from the initial state to the terminating state from fast to slow, gradually slowing down, i.e. ease. is also the default value, and several other easing methods are shown in the following table:

Constant speed
Transition-timing-function:linear;

All five of these are set property values, and we can also customize this easing. Using Cubic-bezier ()
The property value, which passes four parameters p0,p1,p2,p3, values between 0~1.
Custom easing
Transition-timing-function:cubic-bezier (0.25, 0.67, 0.11, 0.55);

As to what these values do, how can we get the relevant information exactly, this to understand the knowledge of the three Bezier curves in computer graphics, similar to the curves in Photoshop. Here we ignore.

There is also a non-smooth transition, which is a skip transition with the property value: Steps (N,type). The first value is a number that indicates a few jumps. The second value is start or end, an optional value. Indicates whether to jump at the beginning or at the end.
Jump 10 times to the end
Transition-timing-function:steps (10,end);

Transition-delay
This property can set a transition delay effect, which is the effect after the set delay time. Use
The Transition-delay property value. If you have more than one style effect, you can set multiple delay times, separated by spaces.
Setting the delay effect
transition-delay:0s, 1s, 0s;

Abbreviations and versions
I can use transition directly to shorthand, there are two forms of shorthand. The first is that each style is declared separately; the second is to not consider the style, which is to use all declaration.
Separate declaration
transition:background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;

If each style is unified, use all transition:all 1s ease 0s directly;

In order to be compatible with the older version, you need to add the corresponding browser prefix, the version information is the following table:

Compatible full version
-webkit-transition:all 1s ease 0s;
-moz-transition:all 1s ease 0s;
-o-transition:all 1s ease 0s;
-ms-transition:all 1s ease 0s; transition:all 1s ease 0s;

Introduction to Animations
CSS3 provides an animated effect similar to Flash Keyframe control, implemented through the animation property. The previous transition attribute can only be animated by specifying the initial state and end state of the property, with some limitations.
The animation animation effect consists of two parts:
1. Declare an animation with keyframes similar to those in Flash animation;
2. Invoke the animation of the Keyframe declaration in the animation property.

The animation provided by CSS3 is a composite property that contains many child properties. As shown in the following table:

In addition to these 9 properties, the animation effect has an important property, the Keyframe property: @keyframes. Its function is to declare an animation and then invoke the Keyframe declaration in animation.

Basic format, "name" can be customized @keyframes name {
/... /
}

Attribute details
Before you explain animation properties, create a basic style.
A DIV element
<div> I'm html5</div>.

Set CSS div {
width:200px; height:200px;
Background-color:white; border:1px solid Green;
}

[Email protected]
The first step in creating an animation is to declare an animation keyframe first. @keyframes Myani {
0% {
Background-color:white; margin-left:0px;
}
50% {
Background-color:black; margin-left:100px;
}
100% {
Background-color:white; margin-left:0px;
}
}

Or repeated, can be written together @keyframes Myani {
0%, 100% {
Background-color:white; margin-left:0px;
}
50% {
Background-color:black; margin-left:100px;

}
}

2.animation-name
Calling @keyframes animations
Animation-name:myani;

3.animation-duration
Sets the time animation-duration:1s for animation playback;

Of course, the above key frames are inserted here with three keyframes. 0% set the white and left offset to 0, and the initial state is consistent, indicating that the animation starts from this place. 50% set black, left offset 100px. And 100% is the last setting, and back to the white and left offset to 0. The entire animation is at a glance.
For the use of keyframes, most of the percentages are easier to control, of course, there are some other control methods.

What state to transition from to what state @keyframes Myani {
from {
Background-color:white; margin-left:0px;
}
to {
Background-color:black; MARGIN-LEFT:30RPX;
}
}

4.animation-timing-function
Set easing
animation-timing-function:ease-in;

3.animation-delay
Set delay time animation-delay:1s;

4.animation-iteration-count
Set the number of cycles
Animation-iteration-count:infinite;

5.animation-direction
Set easing direction alternates
Animation-direction:alternate;

6.animation-play-state
Set Stop playing animation
animation-play-state:paused;

7.animation-fill-mode
No return after setting is complete
Animation-fill-mode:forwards;

Both need to combine, frequency and play direction animation-iteration-count:4; Animation-direction:alternate;

Abbreviations and versions
Abbreviated form FULL version
Animation:myani 1s ease 2 alternate 0s both;

In order to be compatible with the older version, you need to add the corresponding browser prefix, the version information is the following table:

Compatible with the full version, Opera adds webkit to this attribute, so there is no-o-
-webkit-animation:myani 1s ease 2 alternate 0s both;
-moz-animation:myani 1s ease 2 alternate 0s both;
-ms-animation:myani 1s ease 2 alternate 0s both; transition:all 1s ease 0s;

@keyframes also need to prefix
@-webkit-keyframes Myani {...} @-moz-keyframes Myani {...}
@-o-keyframes Myani {...} @-ms-keyframes Myani {...} keyframes Myani {...}

HTML CSS Note warp effect-transition effect-animation effect