A detailed description of the new features of CSS3

Animation IE10

Six properties of animation

ANIMATION-NAME Specifies that the keyframe name of the binding selector is required

Animation-duration Specifies the time it takes to complete an animation s MS
object.style.animationduration= "3s"

Speed curve of animation-timing-function animation
Default value Ease
object.style.animationtimingfunction= "Linear"
Grammar Animation-timing-function:value

Animation-timing-function uses a mathematical function named three times cubic Bezier Bezier function to generate a speed curve that can use its own values or
With pre-defined values

Value: Linear at the same speed from start to end
Ease default from low speed to slow before end
ease-in Animation slow start
Ease-out Animation Low End
Ease-in-out animations start and end from low speed
Cubic-bezier (N,n,n,n) is its own value in the Cubic-bezier function. The possible values are numbers from 0 to 1

Animation-deplay delay before the animation starts
Animation-delay:time;
JavaScript syntax: object.style.animationdelay= "2s"
The Animation-delay value is measured in seconds or milliseconds.
Allow negative values, -2s start the animation immediately, but skip 2 seconds to enter the animation

Animation-iteration-count the number of animation plays IE10
Animation-iteration-count:n|infinite
JavaScript Syntax: object.style.animationiterationcount=3

Whether animation-direction should rotate the animation in reverse
The Animation-direction value is "alternate", then the animation plays normally in odd number of times (1, 3, 5, and so on), and in an even number of times (2, 4, 6, and so on)
) Play backwards
Animation-direction:normal|alternate;
JavaScript syntax: object.style.animationdirection= "Alternate"

Default value None 0 ease 0 1 Normal
JavaScript syntax object.style.animation= "Mymove 5s Infinite"

Four properties of Transition transition IE10

Transition-property
The Transiont-property property specifies the name of the transition CSS property
A list of transition-property:none|all|propertycss attribute names, separated by commas;
JavaScript syntax: object.style.transitionproperty= "Width,height"

Transition-duration How many seconds or milliseconds to complete the transition effect
Transition-duration:time;
JavaScript syntax: object.style.transitionduration= "5s"

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-
Bézier (N,n,n,n);
JavaScript syntax: object.style.transitiontimingfunction= "Linear"

Transition-delay
JavaScript syntax: object.style.transitiondelay= "2s"
Transition-delay:time;

Default value all 0 ease 0
Transition:property Duration timing-function Delay
JavaScript syntax: object.style.transition= "width 2s"

Transform IE10
Transform allows us to rotate, scale, move, or skew elements
Default None
JavaScript syntax object.style.transform= "rotate (7deg)"
Transform:none|transform-functions;

None does not convert
Matrix (N,n,n,n,n,n) uses six-value matrices
Matrix3D (N,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) uses a 16-value 4x4 matrix
Translate (x, y) 2D conversion
Translate3d (x, Y, z) 3D conversion
TranslateX (x) just use the x-axis value
Translatey (y) just use the y-axis value
Translatez (z) just use the z-axis value
Scale (x, y) 2D scaling
Scale3d (x, Y, z) 3D scaling
ScaleX (x), ScaleY (y), Scalez (z)
Rotate (angle) 2D rotation, specify the angle in the parameters
Rotate3d (x,y,z,angle) 3D rotation
Rotatex (angle), Rotatey (angle), Rotatez (angle)
Skew (X-angle,y-angle) defines a 2D tilt transition along the x and Y axes
Skewx (angle) skewy (angle) Perspective (N)

The new CSS3 Selector

1 e:nth-last-child (n)  2 e:nth-of-type (n)  3 e:nth-last-of-type (n)  4 e:last-child  5 E:first-of-type  6 e:only-child  7 e:only-of-type  8 e:empty  9 e:checked e:enabled one e:disabled one e::selection e:not (s) e::not (. s) body:nth-child (even), nth-child (odd)//: Here they represent the even and odd lines (TR) */And so on, respectively, of the table (TBODY).

@Font-face Characteristics
Font-face can be used to load font styles, and it can also load server-side font files, allowing clients to display fonts that are not installed by the client

Font-face Client Font case

<p><font face= "Arial" >arial Courier verdana</font></p>

Font-face Service-side font case

1 @font-face {  2 font-family:borderweb;  3 Src:url (BORDERW0.EOT);  4}  5 @font-face {  6 font-family:runic;  7 Src:url (RUNICMT0.EOT);  8} 9. border {font-size:35px; Color:black; font-family: "Borderweb"} one. event {font-size:110px; Color:black; font-family: "Runic"}

Word-wrap

Sets or retrieves whether a career change is broken when the current row exceeds the bounds of the specified container, and the text is now beaten

Text-overflow It works in concert with Word-wrap
Word-wrap Sets or retrieves whether a career switch is broken when the current row exceeds the bounds of the specified container, while Text-overflow sets or retrieves the current line beyond the specified capacity
How to display the bounds of the

1. clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 2 width:200px;background: #ccc;} 3. ellipsis{ Text-overflow:ellipsis; Overflow:hidden; White-space:nowrap; 4 width:200px; Background: #ccc;}

1 <p class= "clip" > Do not display ellipsis, but simple trim bar </p>2 3 <p class= "ellipsis" > show ellipsis when text overflows in objects </p>

Text rendering

1 p {2-webkit-text-fill-color:black; 3-webkit-text-stroke-color:red; 4-webkit-text-stroke-width:2.75px; 5}

Text-fill-color: Text interior fill color
Text-stroke-color: Text Boundary fill Color
Text-stroke-width: Text Border width

Text rendering

1 p {2-webkit-text-fill-color:black; 3-webkit-text-stroke-color:red; 4-webkit-text-stroke-width:2.75px; 5}

Text-fill-color: Text interior fill color
Text-stroke-color: Text Boundary fill Color
Text-stroke-width: Text Border width

Gradient gradient Effect
Linear gradient Linear upper left (0% 0%) to top right (0% 100%)

Background-image:-webkit-gradient (linear,0% 0%,100% 0%,form (red), to (BALCK))

Background-image:-webkit-gradient (linear,0% 0%,100% 0%,from (#2A8BBE),
Color-stop (0.33, #AAD010), Color-stop (0.33, #FF7F00), to (#FE280E));

Radial gradient radial a gradient from a circle to a circle
Background:-weblit-gradient (radial,50 50,50,50 50,0,form (Black), Color-stop (0.5,red), to (blue));

CSS3 Shadow Shadow and reflection reflect

Background-clip:border-box; background starting from border;
Background-clip:padding-box
Background-clip:content-box
BACKGROUND-CLIP:NO-CLIP:NO-CLICP default property is equivalent to Border-box

Background-origin the position used to determine the background is typically used in conjunction with Background-positon

Background-size to adjust the size of the background image, be careful not to mix with clip, this is mainly used to set the image itself

Background-size:contain; Shrink the image to fit the element (maintain pixel aspect ratio)
Background-size:cover; Extend elements to fill elements (maintain pixel aspect ratio)
background-size:100px 100px; Shrinks the image to the specified size.
background-size:50% 100%; Shrinks the image to the specified size, and the percentage is relative to the size of the containing element

background-break:continuous; The default value. Ignoring the distance between boxes (that is, like elements that are not broken into multiple boxes, are still
As a whole)
Background-break:bounding-box; The distance between the boxes is counted;
Background-break:each-box; Redraw the background individually for each box

Counter () =[counter (name) | counters (Name,list-style-type)]{1,}

Counter-reset IE8

The Counter-reset property sets the value of a counter that has a selector occurrence. The default is 0.
With this property, the counter can be set or reset to any value, either positive or negative. If number is not provided, the default is 0.
Note: If you use "Display:none", you cannot reset the counter. If you use "Visibility:hidden", you can reset the counter

JavaScript Syntax: object.style.counterreset= "subsection"

Counter-reset value of None ID number inherit

attr () =attr (attr-name) inserts the attribute value of the element IE8

Calc () =calc (arithmetic) dynamically calculates length values IE9
Note that you need to keep a space before and after the operator, for example: Width:calc (100%-10px);
The Calc () function supports "+", "-", "*", "/" operations;
The Calc () function uses standard mathematical precedence rules;

Initial belongs to the Css-wide keyword, which means that all properties can accept the value IE11

Unset Erase Attribute Declaration

Color values
The color name of the color color, hex,rgb,rgba,hsl,hsla,transparent,currentcolor

CurrentColor

Resolution resolution value is not allowed to have negative values
Frequency units include: dpi, DPCM, dppx

Angle value angle the normal range of angle values should be within [0-360deg], for example: -10deg is equivalent to 350deg
Angular units include: deg, grad a circle total of 400 gradients, rad a circle of 2 π radians, turn
90deg = 100grad = 0.25turn≈1.570796326794897rad

Length values and units

CH Number "0" width IE9

rem Relative length unit. Calculates a multiple of a value relative to the root element (that is, the HTML element) font-size
The width of VW relative to the viewport. The viewport is divided into 100 units of the VW IE9
The height of vh relative to the viewport. The viewport is divided into 100 units of VH
The larger of the Vmax relative to the width or height of the viewport. The largest of these is the Vmax, which is divided into 100 units.
Vmin the smaller one relative to the width or height of the viewport. The smallest of them is divided into 100 units of Vmin
Q 1/4 mm (quarter-millimeters). Absolute length units.
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

@import @media@font-face@keyframes@supports

E:first-letter/e::first-lettere:first-line/e::first-linee:before/e::beforee:after/e::aftere::p laceholdere:: Selection

E:not (s) e:roote:last-childe:only-childe:nth-child (n) e:nth-last-child (n) e:first-of-typee:last-of-typee:o Nly-of-typee:nth-of-type (n) e:nth-last-of-type (n) e:emptye:checkede:enablede:disablede:target

Property Selector
E[att^= "Val"] Select the e element with the ATT attribute and the property value as a string starting with Val
E[att$= "Val"] Select the e element with the ATT attribute and the property value as a string ending in Val
E[att*= "Val"] Select the e element with the ATT attribute and the property value as a string containing Val

"Recommended"

1. CSS3 Free Video Tutorial

2. Share a CSS3 animation library

3. Animation of CSS3 Learning

4. CSS3 Teaching Animation Production Learning

5. Detailed analysis of new features in CSS3