CSS3 Base point 2

Transform: Variant type; the name (corresponding property value), separated by a space between multiple types. The attribute values in one () are separated by commas.

The Transition property is a shorthand property for setting four transition properties:

• Transition-property which property implements transitions such as: width
• Transition-duration How many seconds/milliseconds to complete the transition effect
• Transition-timing-function motion curves for speed effects, such as linear, ase-in, ease, ease-out, Ease-in-out, Cube-bezier (Bezier curve)
• Transition-delay to wait a few seconds before the transition begins.

shorthand: transition:width 2s ease;CSS3 Animation Animation AnimationBasic parameters and transitionis exactly the same, the first parameter represents which animation is called InfiniteRepresents an infinite loop. Wrap {height:100px;
margin:10px;
-webkit-animation:colorchange 10s linear 1.5s infinite;
} @-webkit-keyframes Colorchange{
0%{background: #f00;}
10%{background: #ff0;}
}

CSS3 Reflection-webkit-box-reflect
1. Direction-webkit-box-reflect:below/above/left/right
2. Distance
3. Transparency
- Webkit-box-reflect:below 10px-webkit-linear-gradient (Top,rgba (0,0,0,0) 20%,
Rgba (0,0,0,0.6) 100%)
Rotation :-webkit-transform:rotate (120DEG);
Pan:-webkit-transform:translate (20px, 10px);-moz-transform:translatex (20px);
Scaling:-webkit-transform:scale (1.1,0.5); X-direction Scaling 1.1 times times, y-direction scaling 0.5 times times
Backface-visibility:visible | Hidden; Defines whether the element is visible when it is not facing the screen. Can be used on poker rotation.
Transform: The name of the variant, the corresponding property value, separated by a space between multiple categories. The attribute values in one () are separated by commas. The
Transition property is a shorthand property for setting four transition properties:

Transition-property which property implements transitions such as: width
Transition-duration How many seconds/milliseconds to complete the transition effect
Transition-timing-function motion curves for speed effects, such as linear, ase-in, ease, ease-out, Ease-in-out, Cube-bezier (Bezier curve)
Transition-delay to wait a few seconds before the transition begins.
Shorthand: transition:width 2s ease;
CSS3 Animation Animation
The animation basic parameters are exactly the same as transition, and the first parameter represents which animation is called Infinite represents an infinite loop
. Wrap {
height:100px;
margin:10px;
-webkit-animation:colorchange 10s linear 1.5s infinite;
}
@-webkit-keyframes Colorchange {
0%{background: #f00;}
10%{background: #ff0;}
}
HTML5 New Add Tag:
Advantage: ① semantic less class name favors SEO code Less
② document Easy to read, search engine to better understand the content of the page, as a developer, to faster and more accurate search for information

CSS3 Base point 2