[JavaScript知识库]具备过渡效果的CSS样式

可过渡的样式

不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果

Vstart = 开始值; Vend = 结束值; Vres = 中间值; p = 过渡函数的输出值
Vres = (1 - p) * Vstart + p * Vend
当Vres具有有效值时，则该CSS样式可过渡

颜色: color、background-color、border-color、outline-color
位置: backround-position、left right、top、bottom
长度: 
	 1. max-height、min-height、max-width、min-width、height、width
	 2. border-width、margin、padding、outline-width、outline-offset
	 3. font-size、line-height、text-indent、vertical-align  
	 4. border-spacing、letter-spacing、word-spacing
数字: opacity、visibility、z-index、font-weight、zoom
组合: text-shadow、transform、box-shadow、clip
其他: gradient

补充一点过渡的知识：如下

过渡transition为复合属性

transition: transition-property || transition-duration|| transition-timing-function || transition-delay

过渡transition的这四个子属性只有是必需值且不能为0。其中，和都是时间。当两个时间同时出现时，第一个是，第二个是；当只有一个时间时，它是，而为默认值0。

过渡的触发方式

一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等

1. hover ：鼠标悬停触发
2. active ：用户单击元素并按住鼠标时触发
3. focus ： 获得焦点时触发
4. @media触发 ：符合媒体查询条件时触发
5. 点击事件 ：用户点击元素时触发