CSS3过度效果及动画—总结



一. 细节内容：
1. 图片如果只设置宽度，高度会自动适应，所以不建议设置高
度。

2. display：
inline（设置后具备行级元素特性）
block（设置后具备块级元素特性）
nline-block（行及元素，但是具有块级属性，但可能产生浏览器不兼容现象出现）     
妙用：若不知道图片大小，可以给父级div加上 display：inline-block（通过行及元素特性使
div被内容撑开）

3. 清除浮动：
1. 可以用任何块级元素（或者display：block属性）
2. 可以在需要清楚浮动的父元素内加上overflow属性

4. cursor：pointer:
鼠标到达该分区，会由箭头变成手

二. DIV属性以及定位：
1. overflow:
hidden:内容超出去隐藏
auto:内容超出去会自动出现滚动条
scroll:不管内容是否超出都会有滚动条
如：
.div1{
width:300px;
height: 300px;
background-color: red;
overflow: hidden;
}
.div2{
width:200px;
height: 500px;
background-color: green;
}
结果：

overflow-x:水平方向. 兼容性不好!
overflow-y:垂直方向.兼容性不好!

2. position:
absolute:绝对定位
relative:相对定位
fixed:相对于浏览器窗口定位（始终停留在浏览器的固定位置，类似于广告）
如：
.div1{
width: 100%;
height: 2000px;
background-color: yellow;
}
.div2{
width: 100px;
height: 200px;
background-color: red;
position: fixed;
right: 0;
top: 0;
}
结果：

3. 居中显示：
div分区水平垂直居中：水平居中  margin：0 auto；
垂直居中：
position: absolute;
left: 0;
top: 50%;
margin-top: ？px;（当前高度的一半）

4. 最外层元素全用百分比无法显示：
只有父元素高度确定时，子元素高度的百分比才能起作用

解决方法①：（常用）
在最外层加上：
html{
height: 100%;
}
body{
height: 100%;
}

解决方法②：
采用绝对定位：（自动找到最上层定位元素，可以看作是浏览器）
在最外层元素内加上：
position:absolute;
如：
.div1{
width: 100%;
height: 100%;
background-color: red;
position: absolute;
}
结果：

三. 浏览器兼容性：
1. -webkit-: 谷歌、Safari 浏览器
2.  -moz-: 火狐
3.  -o-:  欧朋
4. -ms-: IE浏览器

注意：
需要写这些的，都是兼容性不好的，若想兼容多个浏览器，就把想兼容的浏览器都写一遍！

四. CSS3-过渡效果：

1. -webkit-transition：
简写形式：
属性：时间，缓动，延迟
-webkit-transition:left 1s ease 0.5s;

①. 设置要对哪个属性进行过度
-webkit-transition-property:left;

②. 设置动画时间
-webkit-transition-duration:2s;

③. 设置动画延迟
-webkit-transition-delay: 1s;

④. 设置动画函数
-webkit-transition-timing-function: ease ;
ease: 默认值，元素样式从初始状态过渡到终止状态
时，速度由快到慢，逐渐变慢。等同于贝塞尔曲线
（0.25，0.1，0.25，1）。

Linear: 元素样式从初始状态过渡到终止状态
速度是恒速。等同于贝塞尔曲线（0，0，1，1）。

ease-in:元素样式从初始状态过渡到终止状态时，速
度越来越快，呈一种加速状态。等同于贝塞尔曲线
（0.42，0，1，1）。

ease-out:元素样式从初始状态过渡到终止状态时，速
度越来越慢，呈一种减速状态。等同于贝塞尔曲线
（0，0，0.58，1）。
ease-in-out:元素样式从初始状态过渡到终止状态
时，先加速再减速。等同于贝塞尔曲线（0.42，0，
0.58，1）。

⑤. 设置动画自定义函数
-webkit-transition-timing-function:cubic-
bezier(0,0,1,1);
贝塞尔曲线网址：http://cubic-bezier.com

五. 动画：
1. 定义动画:
@keyframes+“对象名”
如：
①: 多段：
@keyframes my {
0%{
background-color: red;
}
50%{
background-color: yellow;
}
100%{
background-color: blue;
}
}
②: 两段：
@keyframes my {
from{
background-color: red;
}
to{
background-color: blue;
}
}

2. 动画调用:
-webkit-animation: “对象名” +“时间”;
详细：
animation-name: 动画名称
animation-duration:动画时间
animation-timing-function:动画速度曲线
animation-delay:动画开始的时间（延迟）
animation-iteration-count:动画播放次数，默认为1
无限次数：Infinite
animation-direction:动画是否逆播放
逆向循环播放：Alternate
animation-fill-mode:动画时间之外的状态
动画完成后保持最后的CSS样式：forwards
动画完成后回到最初的CSS样式：Backwards

如：
.img1{
-webkit-animation: myframe1 3s;
-webkit-animation-fill-mode: forwards;
}

详细内容见笔记：

http://note.youdao.com/noteshare?id=d223a7abbe38da3198e969174c310b35&sub=DAF2FDA7FA0E42CFADBA374041A70D49