animate.css 兼容ie,animate.css一个跨浏览器的CSS动画库
animate.css一个跨浏览器的CSS动画库。简单易用。虽然已Star,但每次使用使用时都要在stars里查找。。。当然啦,更多动画库可以参考这里。
如何使用
要在网站中使用animate.css,只需将样式表放到文档的
中,然后将动画类与任何动画名称一起添加到元素中就可以了。
动画
要设置元素的动画,请将该类添加animated到元素中。您可以包含infinite无限循环的类。最后,您需要向元素添加以下类之一:Class NamebounceflashpulserubberBand
shakeheadShakeswingtada
wobblejellobounceInbounceInDown
bounceInLeftbounceInRightbounceInUpbounceOut
bounceOutDownbounceOutLeftbounceOutRightbounceOutUp
fadeInfadeInDownfadeInDownBigfadeInLeft
fadeInLeftBigfadeInRightfadeInRightBigfadeInUp
fadeInUpBigfadeOutfadeOutDownfadeOutDownBig
fadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBig
fadeOutUpfadeOutUpBigflipInXflipInY
flipOutXflipOutYlightSpeedInlightSpeedOut
rotateInrotateInDownLeftrotateInDownRightrotateInUpLeft
rotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRight
rotateOutUpLeftrotateOutUpRighthingejackInTheBox
rollInrollOutzoomInzoomInDown
zoomInLeftzoomInRightzoomInUpzoomOut
zoomOutDownzoomOutLeftzoomOutRightzoomOutUp
slideInDownslideInLeftslideInRightslideInUp
slideOutDownslideOutLeftslideOutRightslideOutUp
heartBeat
完整的例子:
Example
可以更改动画的持续时间、添加延迟或更改播放次数:.yourElement {
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
与javascript一起使用
当你把animate.css和javascript结合在一起时,你可以用它做很多其他的事情。一个简单的例子:const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
您还可以检测动画何时结束:const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
element.addEventListener('animationend', function() { doSomething() })
您可以使用此简单函数添加和删除动画:function animateCSS(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add('animated', animationName)
function handleAnimationEnd() {
node.classList.remove('animated', animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function') callback()
}
node.addEventListener('animationend', handleAnimationEnd)
}
像这样使用:animateCSS('.my-element', 'bounce')
// or
animateCSS('.my-element', 'bounce', function() {
// Do something after animation
})
注意,这些示例使用了ES6的const声明,放弃了对IE10和一些老化浏览器的支持。如果您愿意,将const转换为var声明,IE10和一些旧的浏览器将得到支持(它们仍然需要提供classList支持)。
设置延迟和速度
延迟类
可以直接在元素的class属性上添加延迟,如下所示:
Class NameDelay Timedelay-2s2s
delay-3s3s
delay-4s4s
delay-5s5s
注意:默认延迟仅为1秒到5秒。如果需要自定义延迟,请直接将其添加到您自己的CSS代码中。
Slow, Slower, Fast, and Faster 类
可以通过添加这些类来控制动画的速度,示例如下:
Class NameSpeed Timeslow2s
slower3s
fast800ms
faster500ms
注意:动画类的默认速度为1。如果需要自定义持续时间,请直接将其添加到您自己的CSS代码中。
更多细节查看这里。
animate.css 兼容ie,animate.css一个跨浏览器的CSS动画库相关推荐
- 超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示 本地下载 通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
- css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
- css搜索的文本框,一个很不错的CSS改写的大表单文本框和搜索按钮组
<一个很不错的CSS改写的大表单文本框和搜索按钮组>要点: 本文介绍了一个很不错的CSS改写的大表单文本框和搜索按钮组,希望对您有用.如果有疑问,可以联系我们. 先看效果图: 开始爬取 C ...
- postcss解决兼容_使用PostCSS进行跨浏览器兼容性
postcss解决兼容 在上一个教程中,我们总结了本系列的"快速入门"部分,现在我们可以继续使用PostCSS生成样式表,并使用各种类型的插件实现各种目的. 在本教程中,我们将使用 ...
- python安装vpython_VPython:一个Python的3D图形动画库+被忽略的数据可视化功能
1 说明: ===== 1.1 VPython是一套简单易用的三维图形库,使用它可以快速创建三维场景和动画. 1.2 VPython 是python默认的3D模块,与PyOpenGL相比,容易上手,无 ...
- css练习github,10个Github上相见恨晚的CSS 奇技淫巧项目,帮你找到写CSS的灵感!
You-need-to-know-css 该项目是 CSS 的各种效果实现,尤其是动画效果. 笔者把自己的收获和工作中常用的一些 CSS 小样式总结成这份文档.目前文档一共包含 43 个 CSS 的小 ...
- 前端进阶必学必会动画学习之Animate.css的使用与解析:一个强大而酷炫的CSS3动画库Animate.css使用方法教程
简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut). ...
- animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...
最新文章
- Linux桌面版横评:三、Fedora 7 Live
- c 语言学习:基本操作,数组,字符串,指针
- FormData的使用
- 给java程序员网址_程序员常用网址,必须收藏
- python 进阶案例_【python3】while和for的进阶案例
- LeetCode:Rotate Image
- php支付回调怎么写_php 微信支付回调校验的两种做法
- 基于单片机的智能交通灯控制系统的设计
- 08python 主函数调用子函数
- __attribute__ 关键字小结
- 删除烦人的微软拼音输入法
- 网易2018校招机器学习算法工程师笔试卷
- 站群服务器金手指排名稳定,黑帽seo手法使用金手指:黑帽SEO,常见的SEO作弊手...
- Big O, Big Omega, Big Theta的含义
- 三相异步电动机的定子磁动势
- 解决重装win10系统找不到驱动器
- Spoon系列-概要
- HI3516EV100 AEC回音消除 + ANR语音降噪功能实现
- Unicode编码和Base64编码
- ExaGrid入围2021年存储大奖