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是动画三兄弟。能给你的界面加上炫酷的效果。
- CSS
transform属性允许你旋转，缩放，倾斜或平移给定元素。
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 都能实现动画效果。
这篇文章对后面两种动画效果进行了比较，总结如下：
- 触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。
- 循环。 animation可以设定循环次数。
- 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。
