I. CSS3 deformation CSS3 deformation is a collection of some effects
such as pan, rotate, zoom, tilt effect
Each effect can be called a warp (transform), which can manipulate the elements to shift, rotate, scale, tilt, and so on, respectively two. CSS3 Displacement: Translate <style type= "text/css" > Li a:hover{
Transform:translate (10px,10px);
Transform:translatex (10px);
Transform:translatey (10px);
} </style> three. CSS3 Scaling scale Transform:scale (zoom multiplier); <style type= "Text/css" >
Li a:hover{
Transform:scale (0.5);
}
</style>
Four. Tilt skew of the CSS3
Transform:skew ( -10DEG,-30DEG);
<style type= "Text/css" >
Li a:hover{
Transform:skew ( -10DEG,-30DEG);
}
</style>
Five. CSS3 's rotating rotate
Transform:rotate (361DEG);
<style type= "Text/css" >
img:hover{
Transform:rotate (361DEG);
}
</style>
※ When you want to use more than one function, the middle of each function is separated by a space six. CSS over-transition: Excessive attribute over-completion time transition animation function excessive delay time;
1. Transition properties (Transition-property)
Define CSS property names for transition animations
IDENT: Specified CSS properties (width, height, background-color property, and so on)
All: Specifies that all elements support the style of the Transition-property attribute, which is generally used for convenience all
2. Time required for transition (transition-duration)
Defines the length of time to convert an animation, from the time it takes to set the old property to the new property, in seconds (s)
3. Transition animation function (transition-timing-function)
Specify the browser's transition speed, and the progress of the operation during the transition, by adding a function to the transition to specify how fast or slow the animation
Ease: speed from fast to slow (default value)
Linear: Speed constant speed (uniform motion)
Ease-in: Faster and faster (fade effect)
Ease-out: Faster and slower (fade effect)
Ease-in-out: Speed first acceleration and deceleration (fade fade effect)
4. Transition delay Time (transition-delay)
Specifies the time at which an animation starts executing, and how long it takes to perform the transition effect when the element attribute value is changed
Positive value: The element transition effect is not immediately triggered and is not triggered until the set time value is crossed
Negative value: The element transition effect is displayed from that point in time, and the previous action is truncated
0: Default value, element transition effect executes immediately
<style type= "Text/css" >
Li img{
Transition:all 0.1s ease-in 1s;
}
Li img:hover{
Transform:rotate (360deg) scale (1.5);
} </style> seven. css animation 1./* Declaration Keyframe */
@keyframes S1303 {
0%{
width:10px;
Transform:translate (100px,0);
}
20%{
width:20px;
Transform:translate (200px,0);
}
40%{
width:30px;
Transform:translate (300px,0);
}
60%{
width:40px;
Transform:translate (400px,0);
}
80%{
width:50px;
Transform:translate (500px,0);
}
100%{
width:60px;
Transform:translate (600px,0);
}
}
2. Call KeyFrames
Animation: Key frame name over time playback speed played;
animation:s1303 2s linear infinite;
The Nineth chapter uses the CSS3 to make the webpage animation
