Animate.css

使用过几次Animate.css，现在来记录一下用法，方便以后直接使用

首先是官网地址：https://daneden.github.io/animate.css/

非常好用的CSS库，只需要引入animate.css

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

并且为添加动画的元素加上类名 animated 以及用JS添加对应动画效果的类名（效果直接在官网上查看）就可以完成元素动效的添加

（同时有两个class才能够实现动画）

一些动画的属性也可以根据需求调整

    animate-duration: 1s;    //动画持续时间animate-delay: 1s;    //动画延迟时间animate-iteration-count: 5;    //动画执行次数

Animate.css兼容性非常好，大部分浏览器都支持。

项目展示

http://static.yuntongauto.com/yth/meber

关于animation 戳这里

转载于:https://www.cnblogs.com/GoTing/p/7141976.html

Animate.css相关推荐

3 css 奖品出现弹出动画_【技术】nuxt中引入wow和animate.css 页面随滚动条出现动画...
1. 通过nodejs安装 cnpm install wowjs --save-dev 安装成功后在"package.json: "wowjs": "^1.1. ...
超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示本地下载通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
html 动画div右侧消失,使用animate.css时，动画一开始不隐藏,如何解决呢？
animate.css 的入场动画,一开始(初始态)怎么隐藏呢?(否则会闪一下.) 动画结束后要保持显示. 补充.. 使用了官网推荐的jquery 扩展代码,运动完后自动删除 class. 这是一个坑 ...
vue过渡和animate.css结合使用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
animate.css动画抖动,Animate.css抖动效果每次都不工作
我正在制作一个Twitch Streamer应用程序,该应用程序使用Twitch API为一组预定义的拖放器提取一些数据.Animate.css抖动效果每次都不工作我有三个按钮来选择所有/在线/离线 ...
使用animate实现页面过度_很多人都在使用的开源CSS动画效果库——animate.css
介绍 animate.css是一堆很酷,有趣且跨浏览器的动画,供你在项目中使用.非常适合强调,主页,滑块和一般的加水效果. animate.css v4正在进行许多改进和重大更改,包括CSS自定义属性 ...
animate.css（第三方动画使用方法）
animation 语法: animation: name duration timing-function delay iteration-count direction; animation-na ...
animate中使用HTML5,animate.css怎么使用？
animate里面包含了许多常用的css动画,我们要使用的它的话需要把它加到自己的页面中,接着就可以在需要动画的元素标签上直接调用里面的动画,然后调节动画次数延迟等达到自己需要的效果就可以了. ani ...
css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

Animate.css

Animate.css相关推荐

最新文章

热门文章