First entry web knowledge point (vi)

Transition transition Apple Browser to prefix IE9 does not support more than hover with the use of
You can add an effect to an element when the element is transformed from one style to another without using Flash animations or JavaScript.
To achieve this, two elements must be established:
① Specifies which CSS property you want to add the effect to to specify the property name
② specifies the duration of the effect, in seconds, the default value is 0
Property:
Transition shorthand property for setting four transition properties in one property
TRANSITION-PROPERTY Specifies the name of the CSS property that applies the transition
Transition-duration defines the time that the transition effect takes. Default value 0
Transition-timing-function a time curve that specifies the transition effect. Default value "Ease"
TRANSITION-DELAY specifies when the transition effect begins. Default value 0
Animations are used to create animations that can replace animated pictures, Flash animations, and JavaScript in many Web pages
① need rules @keyframes
* In @keyframes to specify a style to add browser compatibility prefix IE9 and the following does not support
* Must bind Selector
② Animation name (Take it Yourself)
③ duration
④animation Animation Properties
⑤0%-100% from......to This way can only be specified in two styles generally do not
For example:
Div{animation: The name you take, the length of time;
-moz-animation: The name you take, the length of time;
......
｝
Use @keyframes space to get the name yourself {
0%{background:red}
50% {Background:green}
100% {Background:blue}
｝

Compatibility
① Plus prefix:
-moz-Firefox
-webkit-Apple and Google
-o-Open Gate
②reset Reset technology and normalize technology
③<! Doctype> parsing mode
④csshack technology in IE clip prefix
IE6:-
IE7: *
IE8: \9 or
(IE6, 7 is added before the attribute.) IE9 is added after the property value)
⑤ condition Comment
<! --[if LTE ie6]>......<! [endif]-->
LTE IE6 below
GTE IE6 or more
GT IE6
⑥ Import Package (introduced)
Common compatibility issues
Solutions
① Transparency Opacity→filtter
②png background → guide pack (plugin)
③ fillet → guide bag, picture
④bfc→zoom:1 (numerical random) trigger BFC environment in IE called haslayout technology
⑤ie Browser has a 3px gap → add display:inline under float

First entry web knowledge point (vi)