一些CSS3笔记（过渡和动画）

禁用a标签链接或按钮的完美组合是：pointer-events:none & without href

一、transition属性（过渡）
(1)默认值
transition: all 0 ease 0
(2）属性
transition-property：设置过度效果的CSS属性名称
transition-duration：规定完成过渡效果需要的时间（秒或毫秒）
transition-timing-function：规定速度效果的速度曲线
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(x1,y1,x2,y2),(0,0)与（x1,y1）、 （x2,y2）与（1，1）连成切线
transition-delay：定义过渡效果何时开始
（3）用法
在div:hover{}设置过渡的最终效果
在div{transition：width 1s,height 1s .5s;}设置transition属性

二、transform属性（2D 3D转换）
向元素应用2D或3D转换，允许我们对元素进行旋转、缩放、移动或倾斜。
transform: none|transform-function;
（1）2D转换
a)translate()方法：元素从当前位置移动
transform：translate(50px,100px); //参数为x坐标和y坐标。
b）rotate()方法：元素顺时针旋转给定的角度。允许负值，元素逆时针旋转
transform: rotate(30deg); //顺时针旋转30°
transform-origin: 50% 50%; //设置旋转元素的基点位置
c）scale()：根据给定的x和y参数，元素的尺寸会增加或减少
transform: scale(2,4); //将宽度转换为原始的2倍，高度为原始的4倍
transform: scale(-1,1) //水平反转
transform: scale(1,-1) //垂直反转
d）skew()方法：根据参数，元素翻转给定的角度
transform：skew(30deg, 20deg); //围绕x轴把元素翻转30°,y轴翻转20°
翻转y轴时，x的宽度不变，反之亦然
e）matrix()方法：把所有2D转换方法组合在一起
transform: matrix(sx,0,0,sy,tx,ty)
详见：理解CSS3 transform中的Matrix(矩阵)

（2）3D转换
a）rotateX()方法：元素围绕其 X 轴以给定的度数进行旋转
transform: rotateX(130deg);
b）rotateY()方法：元素围绕其 Y 轴以给定的度数进行旋转。
相关知识链接：好吧，CSS3 3D transform变换，不过如此！

三、转换属性汇总：
（1）transform：向元素应用 2D 或 3D 转换
（2）transform-origin：允许你改变被转换元素的位置。
transform-origin：x y z;（值可为%，center方位等）
transform-origin: 50% 50%; //设置旋转元素的基点位置
（3）transform-style：规定被嵌套元素如何在 3D 空间中显示
transform-style：flat|preserve-3d; （子元素将不保留/保留3D位置）
（4）perspective：规定 3D 元素的透视效果
（5）perspective-origin：规定 3D 元素的底部位置。
（6）backface-visibility：属性定义当元素不面向屏幕时是否可见（旋转 180 度 ，背向用户）。

四、CSS3动画
1、@keyframes：创建动画

  @keyframes myfirst{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
  }
  div{animation: myfirst 5s;}

2、属性
@keyframes：规定动画
animation：所有动画属性的简写属性，animation-play-state属性除外
animation-name：规定 @keyframes 动画的名称
animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function：规定动画的默认曲线，默认ease
animation-delay：动画何时开始
animation-iteration-count：被播放的次数
animation-direction：规定动画是否在下一周期逆向播放
animation-play-state：规定动画是否正在运行或暂停
animation-fill-mode：规定动画在播放之前或之后，其动画效果是否可见
animation-fill-mode：none|forwards|backwards|both;
其中，none：不改变默认行为
forwards：动画完成后，保持最后一个属性
backwards：在animation-delay所指定的一段时间内，动画显示之前 ，应用开始属性
both：向前和向后填充模式都被应用

五、box-sizing属性
box-sizing: content-box| padding-box | border-box;
其中，content-box: border和padding不计算入width之内
border-box：border和padding计算入width之内
inherit：继承父元素的box-sizing属性

六、box-shadow
详见：CSS3阴影 box-shadow的使用和技巧总结