Q1 为了更好的向前兼容不同的浏览器，编写CSS3时都有哪些前缀？分别对应什么浏览器？
| 前缀 | 浏览器 |
|---|---|
| -webkit | chrome和safari |
| -moz | firefox |
| -ms | IE |
| -o | opera |
Q2 说说你理解的伪类和伪元素分别是什么？
伪类：是为了通过选择器，格式化DOM树以外的信息，以及不能被常规CSS选择器获取到的信息。
通过上面的概念我们知道了伪类的功能有两种：
1.格式化DOM树以外的信息。比如： <a> 标签的:link、:visited 等。这些信息不存在于DOM树中。
2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。
伪元素：可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到（::first-letter、::first-line）。同时，伪元素还可以创建源文档不存在的内容，比如使用::before或者::after。
根据上述理解，伪类和伪元素的区别如下：
伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息，而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。
在CSS3中，伪类用单冒号:表示；而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥)；而一个选择器只能同时使用一个伪元素
Q3 分清 Transform 、Transition、 Animations 三兄弟,并阐述它们分别的用处？
1、transform: 改变元素形状
| 属性 | 意义 |
|---|---|
| rotate | 围绕中心点旋转deg单位 |
| translate(x,y) | 向x y轴移动位置px |
| scale | 整体缩放倍数、scaleX scaleY沿轴方向缩放 |
| skew(x,y) | 切变 、scaleX scaleT沿轴切变 |
2、transition：过渡，一个元素从一个形状变换到另一个形状。（需要事件触发）
| 属性 | 含义 |
|---|---|
| property(none/all/indent) | 变换的属性 |
| duration | 转换持续时间，单位 s/ms |
| timing-function(ease/liner/ease-in/ease-out/ease-in-out/cubic-bezier) | 变换速率 |
| delay | 转换开始执行的时间，事件触发后多久执行 |
transition 连写格式：
transition: property duration animation type delay
注意:大众型浏览器 IE 全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀
3、animation动画
| 属性 | 含义 |
|---|---|
| @keyframes | 定义动画名 ，以及该名称包含的动画需要变化的属性及内容 |
| animation-name | 元素绑定动画名（@keyframes定义的动画名） |
| animation-duration | 动画持续时间 |
| animation-timing-function | 动画变换速率 |
| animation-delay | 开始时间。触发动画后多久开始动画 |
| animation-interation-count | 循环播放次数。（infinite 是无限次） |
| animation-direction | 动画运动方向 （normal/ alternate: 默认值为normal，如果是normal动画每次循环都是向前播放的，也就是每次都是从0%播放到100%。 另一个值是alternate，设定animation-direction为alternate，那么就会从0%播放到100%后就会从100%播放到0%。结合 animation-interation-count:infinite，可以形成动画来回循环播放。例如实现“如何使一个小球来回无限运动”） |
| animation-play-state(running/pause) | 动画的播放状态(其中running是默认值，就是在播放。而paused就是暂停播放。而当动画暂停播放后，再重新设置为running的时候，就会从原来的位置重新播放。) |
样例:
.animation{
width: 300px;
height: 300px;
position: absolute;
font-size: 22px;
color: white;
background-color: brown;
animation: ccchange 3s ease alternate infinite;
}
@keyframes ccchange {
0%{
width: 300px;
height: 300px;
background-color: brown;
}
40%{
width: 500px;
height: 500px;
background-color: seagreen;
}
60%{
width: 400px;
height: 400px;
background-color: coral;
}
100%{
}
}
