标签：
CSS的transform、transition和animation属性
transform属性
（变形）
它是CSS用改变换样式的基础属性，你可以设置这个属性的不同的值，来使样式进行改变
这个属性是比较新的是，所以并不是所有的浏览器都能支持，IE8及之前的浏览器是不支持的。
因此还需要给所有浏览器提供厂商前缀
-webkit-transform：
-moz-transform：
-o-transform：
-ms-transform：
记得注意的特性：这个属性不会对周围的元素产生影响。
transform的功能：一定要在使用的时候加上厂商前缀
1：rotate：旋转，给他提供一个0-360deg之间的值，他就会相对之前的值进行修改
2：scale：缩放，调整尺寸，例子：transform：scale（2）；这个例子表示的是让该元素方法两倍。
括号内的数字表示的是缩放的倍数，要乘以当前的尺寸。
注意，当你放大一个元素的时候，它是不会对周围元素造成影响的，浏览器不会将它周围的元素移开，所以会发生的情况是，当你放大一个元素的时候，他很有可能会覆盖掉其他项目
css还给它提供了两个功能：沿着X轴缩放和沿着Y轴缩放，scaleY和scaleX两个值
有一个很有趣的可视化效果，当你给scale设置为负值的时候，可以让一个元素来回翻转。相当于给元素设置了一个镜像图
3：translate：使位置发生改变，单独使用并没有什么卵用，和transition属性结合起来才正真有趣
4：skew：倾斜；它是沿着x轴和Y轴进行倾斜的，你在使用的时候可以通过自己的需求让其进行相应的偏转，他也有两个函数，分别对应X轴和Y轴
origin：选取旋转时候的中心点：
系统在进行初始设置的时候，他的默认值是中心点，你可以通过设置orgin来改变旋转的焦点
例子：让标签以左上角围绕着左上角旋转：
transform-origin：left top（左上角）
transition
为了让teansition生效，需要做以下几件事情：
1：两个样式，一个为初始的样式，另一个是变换后的样式，web将以动画的形式来处理这个变化的过程
2：transition属性，定义动画开始之前的元素外观的样式
3：触发器，一般的所谓的触发器就是通过伪类来做触发器，最常见的就是用：hover来做触发器，
如何使用这个函数：
css transition的核心是用4个属性控制，要以动画展示哪些属性、动画过程要持续多长时间、要用什么类型的动画，以及动画开始之前要不要延迟
1：第一个属性，transition-property，表示要以动画形式展示哪些属性，你可以指定属性，也可以使用关键字all。需要变化的属性之间，用逗号（，）隔开。
2：指定动画持续多上时间，transition-duraction 这个属性是以秒或者毫秒来做单位的。
可以针对不同的变化属性设置不同的过程时间，之间用逗号隔开。
注意，transition和transform一样很多浏览器都是不支持他们的，所以必须在使用之前加上供应商前缀。
-webkit-transition: width 2s,height 2s,transform 2s;
-moz-transition:width 2s,height 2s,transform 2s;
-ms-transition: width 2s,height 2s,transform 2s;
-o-transition: width 2s,height 2s,transform 2s;
transition: width 2s,height 2s,transform 2s;
如果你想让初始的效果都发生变化，也可以使用all关键字来取代这些，独立的属性设计；
-webkit-transition:all s;
-moz-transition:all 2s;
-ms-transition:all 2s;
-o-transition:all 2s
transition: all 2s;
IE9及其之前的浏览器都不支持这个属性
如何给transition定时
transition-timing-function属性来控制变化的速度。
transition-timing-function的属性值可以为以下的任意一个关键字：
1：linear
2：ease 系统默认的属性（开始的时候会很慢，中间很快，最后又减速）
3：ease-in
4：ease-out
5:ease-in-out;
要给transition属性添加厂商前缀，这样才能使更多的浏览器来兼容它。
延迟启动：transition-delay：
transition-delay：x；
这个属性可以设置延迟启动，这个属性也需要设置供应商前缀。
小技巧：
使用css下拉菜单有一个问题就是，当你一不小心让鼠标离开了菜单之后，菜单会很快的就消失了，但是你可以使用transition-delay属性让菜单迅速显示，然后缓慢的消失。
在初始样式中添加代码：
transition-delay：5s；
并且在：hover中不要添加延迟：
transition-delay：0；
transition的快捷写法：
transition：all 1s ease-in .5s；
顺序是：列出属性，延迟时间，定时函数
animation
使用transition是，只能从一组css属性转变到另一组css属性。css3 animation则可以从一组属性转变到另一组属性，在转变到另一组属性。此外，也可以让某一个动画重复，或者当鼠标经过时停止，甚至让动画结束后立即自动返回。
CSS3的animation比transition更加复杂一点，好处：
1：你可以不需要触发动画。
2：也可以给：hover状态添加一个动画，使得鼠标经过一个元素时播放该动画。
3：当访问者初次访问你的网站时，它可以通过在网页上播放动画。
创建动画有两个步骤
1：定义动画。包括创建关键帧，即列出要创建动画的CSS属性。
2：将动画应用到元素上。
这个属性也是需要添加厂商前缀的，但是不用针对IE的供应商前缀-ms-，因为IE 9及更早的版本不支持CSS animation，IE10则支持没有前缀的@keyframes语法。
如何应用animation
1：创建动画（利用@keyframs规则创建淡入淡出动画）
@keyframes fadeIn {
from{opacity: 0;}
to{opacity: 1;}
}
2：将动画应用给元素
.announcement{
width: 100px;
height: 100px;
background: green;
animation: fadeIn 3s;
}
注意，一定要加前缀
如何给animation加定时
1：animation-duration属性；
2：内建关键字方法（linear,ease,ease-in,ease-out,ease-in-out）,让动画一开始很慢，最后迅速结束。
这些与transition-timing-function属性是一样的。
如何完成animation
如果你想让动画运行10次，那么可以将以下的代码添加到要创建的动画样式中：
animation-iteration-count：10
浏览器一般只运行一次动画，如果那正是你想要的，就可以不要使用这个animation-iteration-count属性。
如果你希望动画继续运行，那么可以使用animation-iteration-count属性，并使用关键字infinite。
如果你希望，浏览器往复的实现动画，那么可以设置关键字：alternate
提示：
为了让一个动画运行一定的次数，并且最终回到最初的状态，可以使用偶数迭代次数，并且设置属性为alternate。
当动画完成后，浏览器会突然将动画变回以前的样子，animation提供了一个属性让动画保存到动画结束的样子。
animation-fill-mode：forwards；
表格和表单的格式化
对应的标签：
<table> <caption> <colgroup> <thead> <tbody> <tr>行 <th>单元格的标题 <td>单元格的内容
给表格定义样式
padding（table设置padding属性是完全不起作用的）
设置padding可以控制单元格内容和单元格边框之间的距离
调整垂直对齐和水平对齐
水平对齐：text-align：center居中（left right）这是一个可以被继承的属性
垂直居中：vertical-align：就收四个值 top（单元格顶部） baseline（基线） middle（内容居中） bottom（底部）
这个属性是不会被继承的，只能直接加在th td上
创建边框
当你对表格单元应用边框时，会在表格和单元格之间留下一条明显可见的间隙，为了控制边框的显示，必须充分理解<table>标签的cellsapcing属性和CSS的border-coolapse属性
控制表格单元之间的空格。
border-spacing属性，用来控制这条间隙，并且如果你希望删除浏览器通常会在单元格之间显示的那部分空格，可以将border-spacing的值设置为0；
table{
border-spacing：0；
}
当然如果你喜欢单元格之间有空格，你可以设置这个属性。
消除双边框
最有效的办法就是利用 border-coolapse属性。它接受两个值：separate和collapse。
separate表示默认的显示方式，会产生双边框。
collapse表示取消了单元格的双边框。
table{ border-collapse:collapse; }
注意：
如果设置了collapse属性则border-spacing则不会在起作用。
圆角
利用broder-radius属性可以制作圆角。
注意：
如果设置了collapse属性，那么浏览器将会忽略为表格单设置的圆角，直接输出正方形。
ps：给表单设置样式在我看来就是给盒子模型设置样式，可以把表单看成一个个的小盒子拼接起来，所以不用纠特殊的方法，就用最常规的方法去实现对表单的样式设计。
给行和列定义样式
设置隔行不一样的样式，通过nth-of-type选择器来实现。
tr:nth-of-type（odd）{}//设置奇数行的样式
tr:nth-of-type（even）{}//设置偶数行的样式
如果你想让特定的行具有这些特性，而不是所有行，那么就可以创建一个特殊的类，然后用派生的方法来设置。
注意：
一般来说浏览器会留下那些空白的单元格，如果你想影藏这些单元格的话可以设置empty-cells：hide；
table{empty-cells:hide;}
但是，如果你设置了coolapse属性的话，浏览器依然会显示出空白的格子。
HTML的表单元素
一下是一些常见的HTML表单元素
fieldset
legend
text fields
bottons
drop-down menus
checkbox和radio button
利用CSS布置表单
1：每个label（标签）都用一个tag（标签）包围起来。
2：将display属性值设为inline-block，并设置宽度。
3：调整样式
css布局简介
网页设计的两种类型：固定宽度或者流式。
固定布局：可以让你最大最大限度的控制设置的展现效果，但是对部分访问者会造成不便。小浏览器的用户会有看不到的内容展示，大浏览器的用户会浪费很多空间
流式布局：会根据浏览器窗口的大小进行伸展或者收缩，会根据不同的分辨率使用不同的设计。
固定宽度：常用的使用固定宽度法，许多固定宽度都设计在1000px宽度以下，使浏览器的滚动条和其他部件所占的窗口和空间在1024px x 768px 之内，最常见的宽度就是960px 这种设计正在被广泛使用。
流式布局：流式布局就是所谓的自适应布局，他会根据不同的浏览器分辨率产生不同的呈现效果。但是在超大型的显示器上的时候，这个设计就有点可笑了，文本会变得很长，不宜阅读。
响应式设计：其实就是根据不同的浏览器分辨率提出不同的布局样式，比起前两种，会显得非常复杂。
注意：max-width和min-width属性是固定宽度设计和流式设计的一种折中。
设计页面：先从内容入手，从最本质的东西开始，找到你的页面的是做什么的，你的着重点是什么，先把你要突出的主体现出来。之后再考虑你的样式问题。
layoutGala网站上提供了40种不同的CSS样式
Gridinator 提供了一种简单的工具，可以用来创建复杂的多的网格系统。
CSS相关知识三
标签：
原文地址：http://www.cnblogs.com/gavinzzh-firstday/p/5405983.html
