精选css动画库及其使用

animate.css 动画库

介绍：Animate.css 是最早的也是目前最流行和最易于使用的CSS动画库之一，其包含了60多款不同类型的 CSS 动画如晃动、闪动、淡出淡出效果等，如果你想快速的使用各种 CSS 动画特效的话，你可以选择它。
演示地址：https://daneden.github.io/animate.css/
github地址：https://github.com/daneden/animate.css
在vue中使用：

1、npm install animate.css --save || yarn add animate.css
2、main.js中： import animated from 'animate.css'
3、Vue.use(animated)

举个栗子：

<template>
    <div @mouseenter="demoEnter($event)" @mouseleave="demoLeave($event)" class="demobox">
        <div class="demo animateTime" >小栗子</div>  
    </div>
</template>

<script>
methods:{
    //鼠标移入父盒子后，子盒子显示并且执行动画
    demoEnter(e){
        let etr = e.currentTarget.childNodes[0]
        etr.style.display="block"
        etr.classList.add("animate__animated")   //使用animate.css必需设置class="animated",最新版(4.0+)的要添加animate__前缀,注意是两个_
        etr.classList.add("animate__flipInY")   //添加动画样式,如flipInY
        //etr.classList.add("animated","flipInY")  //若需要兼容IE，请如上逐个添加属性，勿使用本行一次性添加属性方式
    },
    //鼠标移出父盒子后，子盒子消失
    demoLeave(e){
        let lae = e.currentTarget.childNodes[0]
        lae.classList.remove("animate__flipInY")
        lae.style.display="none"
    },
}
</script>

<style scoped>
    //重新设置animate.css动画执行时间，默认是1s。
    .animateTime{
        animation-duration: 0.8s!important;
    }
      .demobox{
             200px;
            height: 200px;
            backrgound-color: #a1a1a1;
            .demo{
                   100px;
                  height: 100px;
                  background-color: #0169b1;
            }
      }
</style>

magic.css动画库

介绍：Magic CSS3 Animations 是一个特殊效果的 CSS 动画库，你可以免费用于你的 Web 项目，简单的引用 CSS 样式：magic.css 或 magic.min.css （压缩版）即可。该项目提供了一个特别酷的演示应用程序。与 animate.css 相比，Magic CSS3 Animation 的大小适中，它的特色动画，如魔法效果，愚蠢的效果和炸弹效果十分出众和特别。
演示地址：http://www.jq22.com/yanshi2754
gitHub地址：https://github.com/miniMAC/magic

hover.css 动画库

介绍：Hover.css 是一个 CSS 动画库，专为您的网站中的按钮和其他 UI 元素而设计。它具有非常好的2D转换，以及许多其他精心制作的动画。
演示地址：http://ianlunn.github.io/Hover/
github地址：https://github.com/IanLunn/Hover