CSS3学习手册（续）

Keyframes

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果

如：

@-webkit-keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}

在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。

调用动画 animation-name

animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。

语法：

animation-name: none | IDENT[,none|DENT]*;

1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）；

2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。

注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。

设置动画播放时间 animation-duration

语法规则

animation-duration: time

time为非负数

设置动画播放方式 animation-timing-function

语法：

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)]*

设置动画开始播放的时间 animation-delay

设置动画播放次数 animation-iteration-count

1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。

2、如果取值为infinite，动画将会无限次的播放。

设置动画播放方向 animation-direction

其主要有两个值：normal、alternate

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

设置动画的播放状态 animation-play-state

其主要有两个值：running和paused。

其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

设置动画时间外属性 animation-fill-mode

主要具有四个属性值：none、forwards、backwords和both

none:默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards:表示动画在结束后继续应用最后的关键帧的位置
backwards:会在向元素应用动画样式时迅速应用动画的初始帧
both:元素动画同时具有forwards和backwards效果

布局

多列布局——Columns

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）

举例：要显示2栏显示，每栏宽度为200px，代码为：

columns: 200px 2;

设置列宽column-width:auto | <length>;
设置列数column-count：auto | <integer>;
设置列间距column-gap: normal || <length>; normal为默认，1em
column-rule:||

边框宽度column-rule-width:可使用任意正浮点值，也可用medium,thick,thin
边框样式column-rule-style：默认为none,可用hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
边框颜色column-rule-color：默认为前景色，也可设置为transparent(透明色)

跨列设置column-span:none | all;来定义一个分列元素中的子元素能跨列多少

盒子模型

定义盒模型的尺寸解析方式 box-sizing

box-sizing:content-box | border-box | inherit

content-box:默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height）
border-box:重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。
inherit:使元素继承父元素的盒模型模式

伸缩布局 flex

创建一个flex容器:

.flexcontainer{ display: (-webkit-)flex; display: flex; }

Flex项目显示(列/行显示):Flex项目是Flex容器的子元素。

flex-direction:column|row;

元素以行/列排列，其默认值是row。
Flex项目移动 align-items控制左右，justify-content控制上下

(-webkit-)align-items:flex-start|flex-end|center;/*左边|右边|居中*/
(-webkit-)justify-content:flex—start|flex-end|center;/*上|下|居中*/

Flex项目自动伸缩：在每个flex项目中的flex属性设置需要伸缩的值