精华内容
下载资源
问答
  • animate

    2019-02-19 09:38:00
    ①下载animate.css 下载地址:https://www.haorooms.com/uploads/example/Animatecss/Animate/animate.css ②安装animate.css /*开发版大小一般为72kb,压缩版为60kb*/  直接在页面顶部head标签通过link引入<...

    下载和安装:

     

        ①下载animate.css

            下载地址:https://www.haorooms.com/uploads/example/Animatecss/Animate/animate.css

        ②安装animate.css  /*开发版大小一般为72kb,压缩版为60kb*/

        直接在页面顶部head标签通过link引入<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>

        如下:

       <link rel="stylesheet" href="css/animate.css" />


       /*按官网顺序*/

     ①Attention seekers

    • bounce    轻轻跳跃一下(弹跳;弹起,反跳;弹回)
    • flash     闪烁两次(使闪光;反射)
    • pulse     慢慢放大,然后回缩(跳动,脉跳)
    • shake     左右轻晃几次
    • swing     以中间顶部为中心小幅度晃动
    • tada      很调皮的一个小晃动,ps:只能这么描述了
    • wobble    大幅晃动,地动山摇

     ②Bouncing Entrances

    • bounceIn 正中央,从无到有,轻轻抖动几次
    • bounceInDown    从右侧进来,无到有,轻轻抖动几次
    • bounceInLeft 雷同,但是一定要注意大小写“专业点叫驼峰式”
    • bounceInRighr
    • bounceInUp
    • bouncing Exits
    • bounceOut 正中央,从有到无,轻轻抖动几次消失
    • bounceOutDown
    • bounceOutLeft
    • bounceOutRighr
    • bounceOutUp

     ③Fading Entrances

    • fadeIn     跟上面bounceIn还是有些区别的,毕竟不抖
    • fadeInDown 逐渐从上面down下来
    • fadeInDownBig逐渐从上面down下来,但是跟上面那位有稍微区别,加了big后起始位置是从设备外进来的
    • fadeInLeft
    • fadeInLeftBig
    • fadeInRight
    • fadeInRightNig
    • fadeInUp
    • fadeInUpBig 用up测试下big吧
    • fading Exits
    • fadeOut     恰与fadeIn相反
    • fadeOutDown 逐渐从上面down下去消失,你确定不玩玩big了?
    • fadeOutDownBig逐渐从上面down下去,但是跟上面那位有稍微区别,加了big后终点位置是从设备外
    • fadeOutLeft
    • fadeOutLeftBig
    • fadeOutRight
    • fadeOutRightNig
    • fadeOutUp
    • fadeOutUpBig

     /*以下这些都是常用的哦!*/

     ④Flippers

    • flip 一个夸张的放大饭庄缩小效果
    • flipInX 沿中心水平轴小幅度反转出来
    • FlipInY 沿中心竖直轴小幅度反转出来
    • flipOutX 沿中心水平轴小幅度反转消失
    • FlipOutY 沿中心竖直轴小幅度反转消失

     ⑤Lightspeed

    • lightSpeedIn 字面意思就是光速出来喽,记得调快速度哦,什么,怎么调速我没说么?好吧,先留个坑,待会儿补。
    • lightSpeedOut 光速消失

       ⑥Rotating Entrances

    • rotateIn 准确说是以正中心点180度旋转渐显
    • rotateInDownLeft  没错,就是以左上角为中心点转下来
    • rotateInDownRight 就是以右上角为中心点转下来
    • rotateInUpLeft     就是以左上角为中心点转上去
    • rotateInUpRight    就是以右上角为中心点转上去
    • rotating Exits
    • rotateOut 准确说是以正中心点180度旋转渐隐
    • rotateOut DownLeft  
    • rotateOut DownRight
    • rotateOut UpLeft     
    • rotateOut UpRight    

     ⑦Sliding Entrances

    • slideInUp 这个slide感觉就有点鸡肋了,有了上边的Lightspeed、fadeIn,就会看出这个的弊端,动作幅度太小
    • slideInDown
    • slideInLeft
    • slideInRight
    • sliding Exits
    • slideOutUp 表现依旧不好
    • slideOutDown
    • slideOutLeft
    • slideOutRight

     ⑧Zoom Entrances

    • zoomIn 牢记哦,正中央出来的,做效果是最棒了
    • zoomInDown
    • zoomInLeft
    • zoomInRight
    • zoomInUp
    • zoom Exits
    • zoomOut 牢记哦,正中央消失的,配合上面的zoomIn做效果是最棒了
    • zoomOutDown
    • zoomOutLeft
    • zoomOutRight
    • zoomOutUp

     ⑨Specials

    • hinge 悬挂,颤抖,掉下去
    • rollIn 从左侧旋转进入
    • rollOut 向右侧旋转消失

    若想用到延时加载和控制运动过渡时间,就必须要用jquery了

     

    转载于:https://www.cnblogs.com/sxxya/p/10399247.html

    展开全文
  • Animate

    2015-07-29 07:47:50
    1、新建Animate对象 2、设置属性 3、startAnimate() xml文件使用动画 1、startAnimate(AnimateUntil.loader(context,r.anim.animId)); 移动动画 TranslateAnimation 使用混合动画 动态代码使用混合动画 as=new ...

                         使用动画步骤

    动态代码使用动画

    1、新建Animate对象

    2、设置属性

    3、startAnimate()

    xml文件使用动画

    1、startAnimate(AnimateUntil.loader(context,r.anim.animId));

    移动动画

    TranslateAnimation

    使用混合动画

    动态代码使用混合动画

    as=new AnimateSet(true);  //true表示共用动画补间

    as.add(Animation);

    xml使用混合动画

    <AnimationSet>

    <alpha></alpha>

    <translate></translate>

    </AnimationSet>

    动画监听

    animate.setAnimationListerner

    自定义动画效果

     

     

     

     

    具体代码地址:http://www.cnblogs.com/yc-755909659/p/4290114.html

    展开全文
  • animate.zip

    2021-01-12 16:12:08
    animate动画
  • animate插件

    2017-03-09 16:26:01
    animate动画效果插件
  • Animate.css

    2021-03-09 16:26:11
    Animate.css
  • animate动画按钮

    2018-11-17 10:47:11
    animate动画按钮
  • animate.css

    2020-09-13 22:09:09
    这是一款基于animate.css的效果非常酷的CSS消息提示动画效果。使用此开发库可以轻松使用animate提供的动画,制作出炫酷的效果。
  • 动画化 用于Adobe Animate的Jsfl动画工具
  • animate的源代码,在使用时可以直接引用,方便易用,实现各种过渡动画
  • animate.less

    2019-02-20 16:48:16
    LESS版animate.css
  • animate.rar

    2020-05-08 14:00:35
    wow.min.js animate.csswow.min.js
  • animate.wxss

    2020-08-11 08:44:32
    animate动画,小程序使用,vue改一下后缀名就可以了。
  • animate动画脚本

    2017-07-10 17:14:15
    animate动画脚本
  • animate学习

    2014-12-05 17:18:27
    通过animate命令是导航经过的时候有个边框从无开始增加的效果。
  • jquery animate

    2019-11-23 16:32:35
    当引用了 jquery 基本的 js 文件,发现animate 的背景颜色无法改变 jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 gitHub地址 .animate{backgroundColor:‘red’} ...

    当引用了 jquery 基本的 js 文件,发现animate 的背景颜色无法改变

    jquery animate函数不能处理背景色渐变,需要使用jquery.color插件
    gitHub地址
    .animate{backgroundColor:‘red’}

    展开全文
  • swiper animate

    千次阅读 2017-08-14 10:28:59
    swiper animate

    制作h5全屏动画切换时可以使用swiper,同时需要为页面的内容添加动画可以使用swiper animate插件。
    swiper animate中文教程
    下载Swiper


    1、 需要加载swiper.aniamte.min.js和animate.min.css。

    2、初始化swiper:

     var mySwiper = new Swiper ('.swiper-container', {
        direction : "vertical",
        mousewheelControl : false,
        effect : "fade",
        noSwiping : true,
    
      onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
        swiperAnimateCache(swiper); //隐藏动画元素 
        swiperAnimate(swiper); //初始化完成开始动画
      }, 
      onSlideChangeEnd: function(swiper){ 
        swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
      } 
      })        
      </script>

    3、在需要添加动画的元素上添加类名 ani

    <div class="swiper-slide">
    <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
    </div>

    swiper-animate-effect:切换效果,例如 fadeInUp
    swiper-animate-duration:可选,动画持续时间(单位秒),例如 0.5s
    swiper-animate-delay:可选,动画延迟时间(单位秒),例如 0.3s


    swiper常用到的其他方法

    API文档
    1、noSwing(禁止切换)
    设为true时,可以在slide上(或其他元素)增加类名’swiper-no-swiping’,使该slide无法拖动。
    该类名可通过noSwipingClass修改。

    使用实例:

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                slider1</div>
            <div class="swiper-slide stop-swiping">
                slider2</div>
            <div class="swiper-slide">
                slider3</div>
        </div>
    </div>
    <script> 
    var mySwiper = new Swiper('.swiper-container',{
    noSwiping : true,
    noSwipingClass : 'stop-swiping',//自定义禁止切换的swiper的类名
    })
    </script>

    使用情况:
    所制作的h5需要用户进行一定的交互操作才能切换到下个页面,比如选择题勾选到某一个答案之后滑动到下一个页面。(可添加计时器对页面切换进行一定的延时。)

    2、mySwiper.slidePrev();(滑动到前一个页面)mySwiper.slideNext();(滑动到下一个页面)

    <script> 
    var mySwiper = new Swiper('.swiper-container',{
    })
    $('#btn1').click(function(){
    mySwiper.slidePrev();
    })
    $('#btn2').click(function(){
    mySwiper.slideNext();
    })
    </script>

    3、mySwiper.slideTo();(滑动到指定页面)

    <script>
    var mySwiper = new Swiper('.swiper-container',{
    })
    $('#btn').click(function(){
    mySwiper.slideTo(0, 1000, false);//切换到第一个slide,速度为1秒
    })
    </script>
    展开全文
  • animate动画特效

    2016-07-31 16:27:47
    animate动画特效animate动画特效html5 css
  • animate.js

    2019-06-06 10:14:57
    基于原生JS的animate,纯原生JS,可实现多元素同时运动和运动队列
  • Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm install animate.css --save Install with yarn: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,816
精华内容 6,326
热门标签
关键字:

animate