常用的样式动画类库有哪些？为什么选择使用动画类库而不是自己编写动画效果？什么是样式的兼容性？产生兼容性问题的原因是什么？需要考虑哪些方面的问题？webkit、ms、moz、o浏览器的前缀。如何解决？

常用的样式动画类库有哪些？为什么选择使用动画类库而不是自己编写动画效果？什么是样式的兼容性？产生兼容性问题的原因是什么？需要考虑哪些方面的问题？webkit、ms、moz、o浏览器的前缀。如何解决？postcss等插件，autoprefixer css。

一.样式动画类库

​ Animate.css (https://daneden.github.io/animate.css/)、

​ Hover.css（http://ianlunn.github.io/Hover/）

​ animxyz（https://animxyz.com/）

二.使用动画类库的原因：

​ （1）动画类库的优点：提供了更加丰富炫丽的效果，使网站在访问者眼中具有吸引力。

​ 有助于确保观众给予更多的关注，从而带来更多的转化；创建具有有趣的优质动画的视频或图片，你将能够为你的业务产生更高质量的潜在客户；为你的网站添加一些超级强大的功能，给用户带来更好的体验。

​ （2）自己编写动画效果耗费大量时间和精力，效果可能差强人意。容易出现问题，也无法实现很好的兼容性。

三.产生兼容性问题的原因：

​ 不同的浏览器对同一段代码解析不同造成浏览器显示效果不同，我们把这样的问题叫做浏览器兼容性问题。

​ 由于不同厂商的浏览器或某浏览器的不同版本（如Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。

四.解决方法：

​ 常见的谷歌浏览器和Safari浏览器的前缀为 -webkit-
​ 火狐浏览器（Firefox）的前缀为 -moz-
​ Opera浏览器的前缀为 -o-
​ IE浏览器的前缀为 -ms-
​ 而Css3动画是比较新的属性，在一些版本比较旧的浏览器上不被支持，因此在用到动画的时候需要考虑对低版本浏览器的兼容的问题。这时的解决办法是，在w3c标准的属性写法前加上带前缀的属性。

五.具体使用：

1.Vue PostCss插件——autoprefixer，自动补全css浏览器前缀

		Autoprefixer是一款基于PostCSS插件，用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀 。它是 Google 推荐的，并在Twitter和阿里巴巴中使用。可以实现css3代码自动补全，也可以运用到sass、less中

=》autoprefixer安装步骤(vue-cli3)

（1）前置依赖安装

  npm install -D css-loader style-loader

（2）安装postcss依赖相关依赖

npm install -D postcss-loader autoprefixer postcss

（3）在webpack.config.js中进行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      }
    ]
  }
}

​

（4） 配置autoprefixer

方式一：在postcss.config.js进行配置

module.exports = {
    plugins: {
      // 兼容浏览器，添加前缀
      'autoprefixer':{
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8"
            //'last 10 versions', // 所有主流浏览器最近2个版本
        ],
        grid: true
      }
    }
}

方式二：在postcss.config.js进行配置

module.exports = {
    plugins: [
      // 兼容浏览器，添加前缀
      require('autoprefixer')({
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8"
          //'last 2 versions', // 所有主流浏览器最近2个版本
      ],grid: true})]
      }

方式三：分为两步
第一步，在posscss.config.js 文件配置

   module.exports = {
       plugins: [
           require('autoprefixer')()
       ]
   }

第二步，在package.json使用 browserslist 字段

"browserslist": [
  "defaults",
   "not ie < 11",
   "last 2 versions",
   "> 1%",
   "iOS 7",
   "last 3 iOS versions"
 ]