动画利器animate.css
使用过CSS3编写动画的同学一定感叹CSS3的强大,但是也会感到书写的麻烦。每次都要计算动画的各个参数,十分麻烦。有没有一个库能封装一些常用的CSS3动画效果。答案是肯定的,animate.css就是一个很好的CSS库,github地址:https://github.com/daneden/animate.css 。下面我们一起来看一看如何使用它。
点击上面的链接,就可以看到一个很简约的页面,其实这个页面就是animate.css的API 文档。在页面中间的下拉框中选择一个动画类,再点击旁边的按钮,就可以看到上方的文字上的动画。
那么,我们在实际的开发中又该如何使用animate.css。比如我有一个div需要使用bounce动画。那么就可以如下面的方法来编写:
<div id="animate-1" class="animated">演示bounce动画</div>
注意class=“animated” 是调用动画必备的,然后就在需要的时候调用:
$('.animate-1').addClass('bounce');
这样,就可以看到动画了。我简单试了一下,这些动画在移动平台上也是可以用的。
动画利器animate.css的更多相关文章
- css3动画和animate.css动画库使用
CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...
- 微信网页动画---swiper.animate.css
项目需要,自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- CSS3动画框架 Animate.css
CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...
- vue 动画框架Animate.css @keyframes
<script src="vue.js"></script> <link rel="stylesheet" href=" ...
- css 动画类库Animate.css
地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Anim ...
- CSS--使用Animate.css制作动画效果
一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; <!DOCTYPE h ...
- Animate.css介绍
Animate.css简介 animate.css 动画库,预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出 ...
- animate.css(第三方动画使用方法)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
随机推荐
- c++ 封装线程库 0
1.互斥锁简介 互斥锁主要用于互斥,互斥是一种竞争关系,用来保护临界资源一次只被一个线程访问. POSIX Pthread提供下面函数用来操作互斥锁. int pthread_mutex_init(p ...
- Unity 去除场景中的雾效果
Windows——Lighting——Setting,然后出现下面窗口,把Other Setting下,Fog的对勾去掉就可以了.
- object的equals方法与“==”的使用
官方文档是这么说的:
- OpenStack Weekly Rank 2015.07.27
Module Reviews Drafted Blueprints Completed Blueprints Filed Bugs Resolved Bugs Cinder 7 1 1 7 10 Sw ...
- node+mongoDB+express项目需求解释
1. morgon模块 --- morgon 用于打印日志,分别为向后台打印和向文件中打印两种情况.stackoverflow. 2. app.use(bodyParser.json()) 3. de ...
- 打开/关闭网卡无线WIFI模块
@echo off title ------(Please run as Administrators)Please select------ :begin echo ---------------- ...
- RMAN参数详解
在Oracle 10g中的配置情况使用RMAN>show all;可以显示出RMAN 配置参数为: CONFIGURE RETENTION POLICY TO REDUNDANCY 1; # d ...
- windows无法通过installer安装SVN
1.当你的电脑是windows xp操作系统的时候在安装TortoiseSVN1.8**版本的时候会出现如下问题造成不能完成安装: 出现“无法通过windowsinstaller服务安装此安装程序包. ...
- GitKraken使用教程-基础部分(1)
1. 首次打开程序 第一次打开GitKraken程序时, GitKraken会提示需要登陆,可以用github.com的账号登陆,或者用邮箱创建账号登陆(如图 1‑1). 图 1‑1登陆帐户界面 登陆 ...
- 相同datatable合并