2016_3_23_查露补缺.md

Transition

transition 	简写属性，用于在一个属性中设置四个过渡属性。  
transition: property duration timing-function delay;
transition-property 	规定应用过渡的 CSS 属性的名称。 默认是all
transition-duration 	定义过渡效果花费的时间。默认是 0。 	
transition-timing-function 	规定过渡效果的时间曲线。默认是 "ease"。

linear 	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

http://cubic-bezier.com/
transition-delay 	规定过渡效果何时开始。默认是 0.
http://www.w3school.com.cn/css3/css3_transition.asp

如何触发过渡效果
1.伪类
2.事件
3.media query

其他
1.开关产生不同的效果
2.相对永久延迟触发
3.steps函数
4.transition end 事件
  WebkitTransitionEnd
  transitionend

https://developer.mozilla.org/zh-CN/docs/CSS/Tutorials/Using_CSS_transitions

Example:

2D Transform

用法
transform: transform-function transform-function ...

transform-function

translate() 位移函数
rotate() 旋转函数
scale() 缩放函数
skew() 扭曲函数
matrix() 矩阵函数

PPT：http://get-set.cn/CUF_PPTs/CSS3-2D-Transform.html

Example:

linear-gradient (线性渐变)

线性渐变格式
linear-gradient([<起点> || <角度>,] <点>, <点>…)

只能用在背景上
IE 
filter:progid:DXImageTransform.Microsoft.gradient
            (startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');

参数
起点：从什么方向开始渐变 默认：top   left、top、left top
角度：从什么角度开始渐变 xxx deg的形式
点：渐变点的颜色和位置 black 50%，位置可选

线性渐变实例
最简单
red, green
从上到下
起点位置
left top, red, green
30deg, red, green 角度是逆时针方向旋转
repeating-linear-gradient

线性渐变实例
加入点的位置
top, red 40%, green 60%
top, red 50%, green 50%

同一个位置两个点——直接跳变,也可以用px
配合rgba
top, rgba(255,255,255,1), rgba(255,255,255,0)

加入背景图片
background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

Example：

radial-gradient (径向渐变)

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
起点： 可以是关键字（left,top,right,bottom），具体数值 或 百分比
形状： ellipse、circle
大小:  具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 
(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
注意firefox目前只支持关键字

Example：

https://jsfiddle.net/hjzheng/9LwgF/

hjzheng/2016_3_23_查露补缺.md

Transition

2D Transform

linear-gradient (线性渐变)

radial-gradient (径向渐变)