Animate.css(一款有意思的CSS3动画库)
官网:https://daneden.github.io/animate.css/
animate.css
是一款跨浏览器的动画库。
使用方式:
在页面的
<head>
中引入样式文件:<head>
<link rel="stylesheet" href="animate.min.css">
</head>给你想要添加动画效果的元素加上
animated
样式,如果想要动画循环执行的话,你需要加上infinite
样式。- 具体样式在官网一一列举出来啦,而且可以直接查看效果,很炫酷啊!
例子:
<h1 class="animated infinite bounce">Example</h1>
当你将 animate.css 与 jQuery 一起使用或者添加你自己的 CSS 规则时, 你可以用 animate.css 做一大堆其他的事,使用 jQuery 动态添加动画:
$('#yourElement').addClass('animated bounceOutLeft');
你也可以检测一个动画是否结束了:
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
注意: jQuery.one()
用在你希望只执行事件一次 的时候。
你可以改变动画的持续时间,添加延迟或改变它执行的次数:
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
注意:确保用供应商的前缀(webkit, moz, 等等)来替换上面CSS中的 vendor
Animate.css(一款有意思的CSS3动画库)的更多相关文章
- 强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
- Animate.css 一款牛逼的css3动画库
Animate.css是一款很牛逼的,跨浏览器的css3动画库,使用方法也很简单只要引入一个animate.min.css就可以了, 简单使用 1 首先引入 animate的 css 文件样式 cdn ...
- Animate.css 一款强大的预设css3动画库
Animate.css是一个有趣的,跨浏览器的css3动画库.很值得我们在项目中引用. 用法 1.首先引入animate css文件 <head> <link rel="s ...
- animate.css – 齐全的CSS3动画库
animate.css – 齐全的CSS3动画库 演 示 下 载 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...
- animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...
- 腾讯开源的轻量级CSS3动画库:JX.Animate
JX.Animate 是由腾讯前端团队 AlloyTeam 推出的一个 CSS3 动画库,通过 JX(腾讯的前端框架)插件的形式提供. Why CSS3 众所周知在支持HTML5的浏览器中 ...
- CSS3 Animation Cheat Sheet:实用的 CSS3 动画库
CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...
- Css3动画库收集
1.animate.css – 齐全的CSS3动画库 http://www.dowebok.com/98.html 2.Angular官方动画库 http://augus.github.io/ngAn ...
- CSS3 -- 动画库
http://www.jq22.com/yanshi819 文件结构: html <!DOCTYPE html> <html lang="zh-CN"> & ...
随机推荐
- Spring Boot-右键maven build成功但是直接运行main方法出错的解决方案
1.代码就一个Controller,从官网复制过来的,如下 package com.springboot.controller; import org.springframework.boot.Spr ...
- 谷歌开源的一个BTREE实现 Go语言
// Copyright 2014 Google Inc. // // Licensed under the Apache License, Version 2.0 (the "Licens ...
- Spring 框架下 (增 删 改 )基本操作
//applicationContext.xml 配置文件 <?xml version="1.0" encoding="UTF-8"?><be ...
- Python(五) 字典
- SpringBoot2.x配置JsonRedisSerializer
@Configurationpublic class SpringCacheRedisConfig { @Bean public RedisCacheManager cacheManager(Redi ...
- MFC 字体
dc.DrawText(_T("hello"), -1, //全部 &rect, DT_SINGLELINE| //在一行 DT_CENTER| //水平居中 DC_VCE ...
- drf3 Serializers 序列化组件
为什么要用序列化组件 做前后端分离的项目,我们前后端交互一般都选择JSON数据格式,JSON是一个轻量级的数据交互格式. 给前端数据的时候都要转成json格式,那就需要对从数据库拿到的数据进行序列化. ...
- FPGA的发展史及FPGA 的基础架构
通过了解早期FPGA的发展,理解FPGA究竟是干什么的,FPGA到底在电子设计领域起到了什么样的作用,下面是一张早期的设计过程 早期的设计流程过程中,只有当硬件完成了才能够得到功能的验证,随着集成电路 ...
- 普通java程序,maven打包
pom.xml文件: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...
- 《http权威指南》读书笔记3
概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...