CSS3 提供了transition 过渡、transform 变换和animation 动画来实现页面中的一些样式转化，这篇文章会对这几个属性做简单的介绍，然后比较一下 CSS3 动画和 JS 动画哪个性能更好。

Transition, transform 和 animation 介绍

transition

transition允许css的属性值在一定的时间区间内平滑地过渡，语法如下：

1

transition ： transition-property transition-duration transition-timing-function transition-delay [, ...]

1. transition-property
   用来指定执行transition效果的属性，可以为 none,all或者特定的属性。
2. transition-duration
   动画执行的持续时间，单位为s（秒）或者 ms（毫秒）。
3. transition-timing-function
   变换速率效果，可选值为ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier（自定义时间曲线）。
4. transition-delay
   用来指定动画开始执行的时间，取值同transition-duration，但是可以为负数。

DEMO:http://codepen.io/CodingMonkeyzh/pen/ZGBRVe

transform

transform 分为2D 和 3D，这里暂时只介绍比较常用的2D transform，其主要包含以下几种变换：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix，语法如下：

1

transform: rotate | scale | skew | translate |matrix;

• rotate 旋转
  rotate 的单位是deg 度，正数表示顺时针旋转，负数表示逆时针旋转。
  DEMO：http://codepen.io/CodingMonkeyzh/pen/XbNYOa
• scale 缩放
  scale 的取值范围是0~n，小于1时表示缩小，反之表示放大。例如scale(0.5, 2)表示水平方向缩小1倍，垂直方向放大1倍， 另外，也可以通过scaleX或者scaleY对一个方向进行设置。
  DEMO：http://codepen.io/CodingMonkeyzh/pen/doOKrg
• skew 扭曲
  skew 的单位跟rotate一样都是deg 度。例如 skew(30deg, 10deg)表示水平方向倾斜30度，垂直方向倾斜10度。
  DEMO：http://codepen.io/CodingMonkeyzh/pen/KpNeYg
• translate 偏移
  偏移同样包括水平偏移和垂直偏移。translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）。
  DEMO：http://codepen.io/CodingMonkeyzh/pen/waoXbB

animation

CSS3 中的 animation 是通过一个叫Keyframes 关键帧的玩意来控制的，他的命名是由”@keyframes”开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个”@keyframes”中的样式规则是由多个百分比构成的，如“0%”到”100%”之间，语法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@keyframes IDENT {
  from {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  to {
    Properties: Properties value;
  }
}

或者全部写成百分比的形式： 
@keyframes IDENT {
  0% {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  100% {
    Properties: Properties value;
  }
}

animation和transition一样有自己相对应的属性，那么在animation主要有以下几种：animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面对其中的一些属性进行解释：

• animation-name 关键帧名
  用来定义一个动画的名称，也就是由前面的keyframes创建的动画名，默认值为none，当值为none时，将没有任何动画效果。如果我们要同时附几个animation给一个元素，只要用逗号,隔开即可。
• animation-iteration-count 动画循环次数
  默认为1，如果要进行无限循环，只要设为infinite即可。
• animation-direction 动画播放的方向
  其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
• animation-play-state 播放状态
  其主要有两个值，running和paused，其中running为默认值。可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放。这个属性不常用。

DEMO 1: http://codepen.io/CodingMonkeyzh/pen/mJOKZY

DEMO 2: http://codepen.io/CodingMonkeyzh/pen/EjNpaE

一般我们通过box-shadow来设置盒阴影，但是有些属性我们一般没有用到，这篇文章将对box-shadow属性进行逐个分析。

语法

1
2
3
4
5

E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}

即：

对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

• inset 投影方式
  此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”, 其投影就是内阴影；
• x-offset
  水平方向的偏移量；
• y-offset
  垂直方向的偏移量；
• blur-radius模糊半径
  可选，只能为整数，值越大阴影就越模糊；
• spead-radius扩展半径
  可选，可以为正数或者负数，如果为负数，整个阴影将会缩小；
• color阴影颜色
  可选，如果不设定值，浏览器将会采用其默认色，默认色一般是黑色。

一般我们很少用到inset和spead-radius这两个属性，如果运用好这两个属性可以制作出非常酷炫的效果。

DEMO

http://codepen.io/CodingMonkeyzh/pen/rVWGvm

通过Media Query 媒体查询可以针对符合相应条件的媒体设置特定的样式。

引入方式

引入媒体查询的方式有两种。

link 方式引入

1

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

css 中引入

1
2
3
4
5

@media screen and (max-width: 600px) {
  选择器 {
    属性：属性值；
  }
}

常见的 Media Query

兼容性参考

我们可以通过 CSS3 中的box-shdow和transform 来实现酷炫的Drop-shadow效果：

下面记录一下是实现步骤。

DOM 结构

我们仅仅需要一个div作为主体，阴影可借助伪元素:before和:after来实现。所以我们的 DOM 结构非常简单。

1

<div class="drop-shadow">drop shadow effect</div>

添加阴影

给两个伪元素添加阴影，暂时先搞定左边，右边的阴影稍后再处理。

1
2
3
4
5
6
7
8
9
10
11

.drop-shadow:before,
 .drop-shadow:after {
   content: "";
   position: absolute;
   z-index: -1;
   bottom: 15px;
   left: 10px;
   width: 50%;
   height: 20%;
   box-shadow: 0 15px 20px rgba(125, 125, 125, 0.8);
 }

现在，我们看到的是这个样子：

调整阴影

下面我们再通过transform来旋转一下阴影的角度，这样看起来更有立体感。

1
2
3
4
5
6
7
8
9
10
11
12

.drop-shadow:before,
 .drop-shadow:after {
   content: "";
   position: absolute;
   z-index: -1;
   bottom: 15px;
   left: 10px;
   width: 50%;
   height: 20%;
   box-shadow: 0 15px 20px rgba(125, 125, 125, 0.8);
   transform: rotate(-5deg);
 }

这样我们就完成了一边的制作了：

调整阴影

接下来，我们只需要把其中一个阴影挪到右边即可。

1
2
3
4
5

.drop-shadow:after {
   right: 10px;
   left: auto;
   transform: rotate(5deg);
 }

这样，左边的阴影就翻转到了右边，大功告成：

什么是 BFC (Block formating contexts)

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

BFC 的运用

在很多情况下，我们都会遇到下面这种情况：

图片是 float:left 的，右侧文本过多时会围绕图片，而我们希望的是，文本保持在红框内，那么这个时候，我们就可以把文本转化为一个BFC来实现此效果。

合并外边距与BFC

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠的结果

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个外边距一正一负时，折叠结果是两者的相加的和。

产生折叠的必备条件：margin必须是邻接的!

• 必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
• 没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开。
• 都属于垂直方向上相邻的外边距，可以是下面任意一种情况
  • 元素的margin-top与其第一个常规文档流的子元素的margin-top
  • 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
  • height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
  • 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

如上图所示，margin-top产生了折叠。