1. css3动画兼容情况怎么样?

• 查询Can I use网站, 搜索CSS3动画属性名, 查询浏览器支持情况.

2. 解决浏览器兼容问题和私有前缀的方法有哪些?

• 添加私有前缀及几种方法:

  1. 使用sublime编辑器插件autoprefixer;
  2. 前端构建工具自动生成前缀;
  3. 使用sass/lass简化前缀;
  4. 手动添加前缀
     代码如下:

    transform: rotate(30deg);         /*一般把无前缀的样式写在第一行*/
    -ms-transform: rotate(30deg);        /* IE 9 */
    -webkit-transform: rotate(30deg);    /* Safari and Chrome */
    -o-transform: rotate(30deg);        /* Opera */
    -moz-transform: rotate(30deg);        /*火狐*/
  

• 使用最新版本的主流浏览器, 如谷歌, 火狐, IE10.

3. CSS3动画卡顿怎么办?

使用will-change 属性, 优化动画的流畅度

.example {
  will-change: transform; /*表示需要浏览器优化transform*/
}

/*优化其它属性*/ 
will-change: scroll-position  
will-change: contents
will-change: opacity          /*需要浏览器优化透明度*/
will-change: left, top

点击查看will-change的更多内容