First, the transition
What is transition?
Transition means: css attribute value of an element in a period of time, a smooth transition to another value, the transition process and is mainly the result of observation.
You can set the transition properties:
Support the transition style property, color property, the value is the value, transform, gradient, visibility, shadow
The entry into force of the specified properties of transition:
transition-poperty: The above properties css / all
When specifying the length of transition
transition-duration: length / s / ms transition
Specified transition time curve function
transition-timing-function:
1.ease defaults, slow -> fast -> slow Slow start, fast becomes faster, the slow end
2.linear uniform
3.ease-in slow ---> fast slow start, a quick end
4.ease-out fast start, end slow
5.ease-in-out start slow, then accelerated and decelerated, slow end
Specifies the time to execute the transition delay
transition-delay: s/ms
Write position transition properties
1. The transition element declaration in the style of (elements of his style in) transitions have to go back there.
2. The transition operation on the trigger element's (hover), transition effects, never to return.
Transition shorthand:
transition:property duration timing-function delay;
Minimal way: transition: duration;
Second, animation
What is animation ?
So that elements from one style to another change, then changed to other patterns ......
Equivalent to put a lot of transition effects used together.
Keyframe:
1. execution time animation
2. style on this point in time
Animated implementation steps:
1. Declare animation and keyframe animation
@keyframes animation name {
// define keyframes
0%} {beginning of the animation style
........
At the end of the animation style {100%}
}
2. Call Animation
animation-name: name of the animation;
animation-duration: animation a period of time;
3. The animation of other properties
animation-delay
4. The animation speed time curve function
animation-timing-function
ease/linear/ease-in/ease-out/ease-in-out
5.animation-iteration-count
Specify any animation
Value, specific numbers / infinite unlimited
6.animation-direction:
Play the animation
The value normal Normal 0% to 100%
reverse reverse play 0% 100%
alternate turns to play
Odd forward play
Even times reverse play
7. shorthand way:
animation:name duration timing-function delay iteration-count direction;
8.animation-fill-mode
Specify the animation display state before and after the play
1.none defaults
After 2.forwards animation is complete, remain on the last keyframe
3.backwards (the need for delay) before the animation begins, held on the first keyframe
4.both, set both forwards and backwards
Animation Compatibility:
如果要兼容低版本的浏览器，需要在声明动画的时候加前缀
@keyframes 动画名称{}
@-webkit-keyframes
@-moz-keyframes
@-o-keyframes
三.CSS优化
目的：减少服务器压力，提升用户体验。
1.优化原则
尽量减少HTTP请求的个数。
页面顶部引入css样式
将css和js放到外部独立的文件夹中
2.CSS代码优化
缩小样式文件
减少样式的重写
避免出现空的src和href
选择更优的样式属性值(能使用复合，简写的写法,就不要单独定义)
代码压缩