CSS 3基础

1.为了更好的向前兼容不同的浏览器，编写CSS3时都有哪些前缀？分别对应什么浏览器？

浏览器引擎前缀，是一些放在CSS属性前的小字符串，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。常用前缀和浏览器对应如下：

当需要使用浏览器引擎前缀(vendor-prefix)时，最好是把带有各种前缀的写法放在前面，然后把不带前缀的标准的写法放到最后。比如：

.box {
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  -o-border-radius: 10px; 
  border-radius: 10px; 
}

2.说说你理解的伪类和伪元素分别是什么？

伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类。（这里有一个例外，就是:first-child和:lang是可以从DOM树中推断出来的。）

CSS的现有标准中，伪类包括：

• :first-child，应用第一个子元素
• :link，应用未访问过的链接
• :visited，应用已访问过的链接
• :hover ，应用鼠标指针悬浮的元素
• :active，应用活动的链接
• :focus ，应用聚焦的输入元素
• :lang，伪类将应用于元素带有指定lang的情况，不常用

伪元素是创造文档树之外的对象。例如文档不能提供访问元素内容第一字或者第一行的机制。伪元素还提供一些在源文档中不存在的内容分配样式，例如:before和:after能够访问产生的内容。伪元素的内容实际上和普通DOM元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

CSS的现有标准中，伪元素包括：

• :first-letter，伪元素的样式将应用于元素文本的第一个字（母）
• :first-line ，伪元素的样式将应用于元素文本的第一行
• :before ，在元素内容的最前面添加新内容
• :after ，在元素内容的最后面添加新内容

3.分清 Transform 、Transition、Animations 三兄弟,并阐述它们分别的用处？

Transform 、Transition、Animations是动画三兄弟。能给你的界面加上炫酷的效果。

• CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

• CSS transition提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。

  CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing function，比如匀速地或先快后慢)。

div {
    transition: <property> <duration> <timing-function> <delay>;
}

• CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

p {
  animation-duration: 3s;
  animation-name: myfirst;
}

@keyframes myfirst /*定义动画名*/
    {
    0%   {background:red; left:0px; top:0px;} /*定义起始帧样式，0%可以换成from*/
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;} /*定义结束帧样式，100%可以换成to*/
    }
}

总结来讲，transform描述了元素静态样式。而transition 和 animation 都能实现动画效果。

这篇文章对后面两种动画效果进行了比较，总结如下：

1. 触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。
2. 循环。 animation可以设定循环次数。
3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。