精选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)">
        <div class="demo animated animateTime" >小栗子</div>  //使用animate.css必需设置class="animated"
    </div>
</template>

<script>
methods:{
    //鼠标移入父盒子后，子盒子显示并且执行动画
    demoEnter(e){
        let a = e.target.childNodes[0]
        a.style.display="block"
        a.classList.add("flipInY")
    },
    //鼠标移出父盒子后，子盒子消失
    demoLeave(e){
        let b = e.target.childNodes[0]
        b.style.display="none"
        b.classList.remove("flipInY")
    },
}
</script>

<style scoped>
    //重新设置animate.css动画执行时间，默认是1s。
    .animateTime{
        animation-duration: 0.8s!important;
    }
    .demo{
        ...
    }
</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

原文地址：https://www.cnblogs.com/huihuihero/p/12581527.html