Animate.css简介

animate.css 动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

Animate.css下载

百度云盘下载链接

Animate.css动画演示

演示地址

Animate模板

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <!-- 引用animate文件 -->

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

</head>

<body>

</body>

</html>
  • 添加一个动画
<!-- animated类似与全局变量，定义动画持续时间 -->

<!-- bounce具体动画的名称 -->

<div class="animated bounce">

  Animate.css

</div>
  • 定义播放次数
<!-- infinite定义动画无限播放 -->

<div class="animated bounce infinite">

  Animate.css

</div>
  • 通过JavaScript或jQuery添加Animate动画
<div>

  Animate.css

</div>

<!-- 在线引用jQuery文件 -->

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<!-- 通过jQuery添加animate动画 -->

<script>

   $('div').addClass('animated bounce');

</script>
  • 添加定时器，5秒后删除animate无限播放效果
<div>

  Animate.css

</div>

<!-- 在线引用jQuery文件 -->

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<!-- 通过JavaScript或jQuery添加animate动画 -->

<script>

   $('div').addClass('animated bounce infinite');

   setTimeout(function(){

     $("div").removeClass("infinite");

   },5000)

</script>

Animate.css介绍的更多相关文章

  1. animate.css的使用

    前面的话 animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单.本文将详细介绍animate.css的使用 引入 anim ...

  2. React 系列教程 1：实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

  3. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  4. 强大的CSS3动画库animate.css

    今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...

  5. wow.js+animate.css——有趣的页面滚动动画

    今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...

  6. vue与animate.css的结合使用

    在vue项目中,由于页面需要动画效果,使用动画其实有多种方式,可以使用vue中的过渡transition,可以使用animate动画与transition配合使用,也可以单独使用animate动画库. ...

  7. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  8. CSS动画框架Loaders.css +animate.css

    CSS加载动画框架Loaders.css 是一款非常出色的加载动画框架,Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画,这些动画并不需要图片来辅助,而是仅仅需要CSS即可 ...

  9. vue项目中引入animate.css和wow.js

    本文转自:https://blog.csdn.net/liyunkun888/article/details/85003152 https://www.zhuimengzhu.com/content/ ...

随机推荐

  1. 关于session销毁的问题，invalidate() 和removeAttribute()

    request.getSession().invalidate(); 销毁当前会话域中的所有属性 request.getSession().removeAttribute("username ...

  2. 原生webview 日期格式转时间戳兼容问题

    需要根据后端返回的日期格式返回相应时间戳 后端返回的数据格式: let dateStr = 2019-04-19T10:39:10.000+0000;   直接new Date(dateStr ).g ...

  3. 线程间的通信方式2--管道流Pipes

    “管道”是java.io包的一部分.它是Java的特性,而不是Android特有的.一条“管道”为两个线程建立一个单向的通道.生产者负责写数据,消费者负责读取数据. 下面是一个使用管道流进行通信的例子 ...

  4. Object toString方法

    1.System.out.println()里的参数会自动调用toString方法. package com.mydemo.controller; // 1.getClass().getName() ...

  5. 【Python】Java程序员学习Python（十一）— IO

    一.前言 io的内容其实还是有很多的,现在我也只是了解初步用法,当然详细内容还是应该参照官方api的: 官方api:https://docs.python.org/3/library/os.html. ...

  6. ASP.NET中母版页引用外部js或css文件无效,提示对象未定义解决方法

    最近做网站用了一个js+css实现的带有二级菜单的导航条,在母版页创建好后,子页面调用出现了许多奇怪的问题,多方查证后的最终解决方案和大家分享下.... 1.路径问题 如果是一个单独的aspx页面调用 ...

  7. ASM Disk Discovery 最佳实践

    ASM DISK 的Discovery PATH ASM实例的ASM_DISKSTRING初始化参数使用一个逗号分割的字符串限制ASM实例发现的DISK可以用于ASM DISK, 该字符串支持通配符如 ...

  8. NSCopying简析

    NSCopying简析 用到NSCopying的时候并不多,但还是有必要知道最基本的用途,比方说数组的拷贝操作,需要注意的是,数组的拷贝操作并不是执行了 copy 方法,而是需要执行 initWith ...

  9. 【2017-01-08】QTimer与QThread的调度时间精度

    在最近的项目开发中,我发现有的人喜欢用QThread来实现需要循环执行的工作流,而有的人又喜欢用QTimer来实现. 在表面上,两种实现方式似乎都可以,但我觉得QTimer的精度可能会有问题,首先看一 ...

  10. 【原创】uWSGI http和http-socket说明

    http 和 http-socket的使用上有一些区别: http: 自己会产生一个http进程(可以认为与nginx同一层)负责路由http请求给worker, http进程和worker之间使用的 ...