Animate.css总结

918 阅读2分钟

简单介绍animate.css

animate.css是一个集合炫酷的,有趣的和跨浏览器的动画。

快速使用

  • 引入css文件
    • 下载到本地加载<link rel="stylesheet" href="animate.min.css">
    • 使用CDN<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
  • 给你想要添加动画效果的元素加上animated样式,如果想要动画循环执行的话,你需要加上infinite样式。

    <h1 class="animated infinite bounce delay-2s">Example</h1>

vue中使用

安装,入口文件main.js中引入 ;

  • npm i animate.css -S
  • import animated from 'animate.css' Vue.use(animated)
  • 在模板中使用时,<div class="animate__animated animate__rollIn helloWorld"> 要加上前缀animate__ ,否则可能没有动画效果
Attebtion Seekers:  //晃动
    bounce  //上下轻微弹跳
    flash   //闪烁
    pulse   //轻微先变大后变小
    rubberBand  //橡皮筋拉伸缩回
    shake   //左右晃动
    swing   //秋千左右摇摆
    tada    //乒乓球弹跳
    wobbble //左右大幅摇摆
    
Bouncing Entrances    //晃动进入
    bounceIn    //弹跳进入
    bounceInDown    //自上弹入
    bounceInLeft    //自左弹入
    bounceInRight   //自右弹入
    bounceInUp      //自下弹入

Bouncing Exits      //晃动离开
    bounceOut       //晃动从自身离开
    bounceOutDown   //晃动向下离开
    bounceOutLeft   //晃动向左离开
    bounceOutRight  //晃动向右离开
    bounceOutUp     //晃动向上离开
    
Fading Entrances    //淡入方式
    fadeIn          //从自身轻微淡入
    fadeInDown      //从上轻微淡入
    fadeInDownBig   //从上大幅淡入
    fadeInLeft      //从左轻微淡入
    fadeInLeftBig   //从左大幅淡入
    fadeInRight     //从右轻微淡入
    fadeInRightBig  //从右大幅淡入
    fadeInUp        //从下轻微幅淡入
    fadeInUpBig     //从下大幅淡入
    
Fading Exits        //淡出方式
    fadeOut         //淡出
    fadeOutDown     //向下轻微淡出
    fadeOutDownBig  //向下大幅淡出到底
    fadeOutLeft     //向左轻微淡出
    fadeOutLeftBig  //向左大幅淡出到底
    fadeOutRight    //向右轻微淡出
    fadeOutRightBig //向右大幅淡出到底
    fadeOutUp       //向轻微淡出
    fadeOutUpBig    //向上大幅淡出到底

Flippers        //翻滚
    flip        //元素中心为基点翻滚
    flipInX     //元素x轴为基点翻滚进入
    flipInY     //元素Y轴为基点翻滚出去
    flipOutX    //元素x轴为基点翻滚进入
    flipOutY    //元素Y轴为基点翻滚出入
    
lightSpeed  //飘进飘出
    lightSpeedIn    //飘进
    lightSpeedOut   //飘出
    
Rotating Entrances  //旋转进入方式
   rotateIn             /元素中心基点
   rotateInDownLeft     //上左旋转进入
   rotateInDownRight    //上右进入
   rotateInUpLeft       //下左进入
   rotateInUpRight      //下右进入
   
Rotating Exit     //旋转出去方式
    rotateOut           //旋转出去
    rotateOutDownLeft   //向左下旋转出去
    rotateOutDownRight  //向右下旋转出去
    rotateOutUpLeft     //向左上旋转出去
    rotateOutUpRight    //向右上旋转出去
    
Sliders         //滑动进出方式
    slideInDown     //自上而下
    slideInLeft     //自左进入
    slideInRight    //自右进入  
    slideOutLeft    //自左出去
    slideOutRight   //自右出去
    slideOutUp      //自下出去
    
Zooms               //scale由零变一,由一变零
    zoomIn          //scale由零变一
    zoomInDown      //从上方向
    zoomInLeft      //从左方向
    zoomInRight     //从右方向
    zoomInUp        //从上方向
    zoomOut         //scale由一变零
    zoomOutDown     //从上方向
    zoomOutLeft     //从左方向
    zoomOutRight    //从右方向
    zoomOutUp       //从下方向
    
Specials    //特殊的
    hinge   //向下转轴
    jackInTheBox    //大小由零变一晃动淡入
    rollIn  //从左淡入旋转滑入
    rollOut //从右淡入旋转滑出