css3基础点2

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property  哪个属性实现过渡如：width
• transition-duration  完成过渡效果需要多少秒/毫秒
• transition-timing-function  速度效果的运动曲线，如linear 、ase-in 、ease 、 ease-out 、ease-in-out 、 cube-bezier（贝塞尔曲线） 
• transition-delay  规定过渡开始前等待几秒   

CSS3倒影 -webkit-box-reflect
1.方向 -webkit-box-reflect: below/above/left/right
2.距离
3.透明度
-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,
rgba(0,0,0,0.6) 100%)
旋转 ：-webkit-transform: rotate(120deg);
平移 ：-webkit-transform: translate(20px, 10px); -moz-transform: translateX(20px);
缩放 ： -webkit-transform: scale(1.1,0.5); X方向缩放1.1倍，Y方向缩放0.5倍
backface-visibility: visible | hidden; 定义当元素不面向屏幕时是否可见。可用在扑克牌旋转上。
transform：变形种类；的名称（对应的属性值），多个种类之间使用空格分隔。一个（）中的属性值之间用逗号分隔。
transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property 哪个属性实现过渡如：width
transition-duration 完成过渡效果需要多少秒/毫秒
transition-timing-function 速度效果的运动曲线，如linear 、ase-in 、ease 、 ease-out 、ease-in-out 、 cube-bezier（贝塞尔曲线）
transition-delay 规定过渡开始前等待几秒
简写：transition：width 2s ease；
CSS3 动画 animation
animation 基本参数与 transition 完全相同，第一个参数表示的是调用哪个动画 infinite 表示无限循环
.wrap {
height:100px;
margin:10px;
-webkit-animation:colorChange 10s linear 1.5s infinite;
}
@-webkit-keyframes colorChange {
0%{ background:#f00;}
10%{ background:#ff0;}
}
HTML5新增加标签：
优势：① 语义性好 少类名 有利于SEO 代码少
② 文档易读 、搜索引擎能够更好的理解页面中的内容、作为开发者，能够更快更准确的搜索到信息