css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工。美你妹啊,请叫我前端工程师好不好。呃。。好吧,攻城尸。。。呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3的动画就绝对是值得你拥有了,虽说IE9以及更早版本的IE浏览器都不支持css3动画,但是IE6-8浏览器已是江河日下,使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多,所以如果很简单的就能让一部分人获得更好的用户体验,那何乐而不为呢。
从广义上来讲,css3动画可以分为两种。
过渡动画
第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形(transform)等等这些属性。css过渡只能定义首和尾两个状态,所以是最简单的一种动画。
要想使一个元素产生过渡动画,首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有
transition-property:规定对哪个属性进行过渡
transition-duration:定义过渡的时间,默认是0
transition-timing-function:定义过渡动画的缓动效果,如淡入、淡出等,默认是 ease
transition-delay:规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是0
为了书写方便,也可以把这四个属性按照以上顺序简写在一个 transition 属性上:
如果是使属性的默认值,则可以省略:
相当于:
如果想要同时过渡多个属性,可以用逗号隔开,如:
使用transtion属性只是规定了要如何去过渡,要想让动画发生,还得要有元素状态的改变。如何改变元素状态呢,当然就是在css中给这个元素定义一个类(:hover等伪类也可以),这个类描述的是过渡动画结束时元素的状态。
这样,当我们把鼠标移动到div上的时候,div的状态发生了变化,就能看到宽度从100到400,高度从100到400,背景颜色从黑到红的,过渡时间为3秒的过渡效果了。
除了使用hover等系统提供的伪类外,我们也可以随意的定义自己的类,然后想要过渡时就通过js把类加到元素上面:
关键帧动画
第二种叫做关键帧(keyframes)动画。不同于第一种的过渡动画只能定义首尾两个状态,关键帧动画可以定义多个状态,或者用关键帧来说的话,过渡动画只能定义第一帧和最后一帧这两个关键帧,而关键帧动画则可以定义任意多的关键帧,因而能实现更复杂的动画效果。
关键帧动画的定义方式也比较特殊,它使用了一个关键字 @keyframes 来定义动画。具体格式为:
@keyframes 动画名称{
时间点 {元素状态}
时间点 {元素状态}
…
例如:
这段代码定义了一个名为demo,且有5个关键帧的动画。0% ,10% 等这些表示的是时间点,是相对于整个动画的持续时间来说的,时间点之后的花括号里则是元素的状态属性集合,描述了这个元素在这个时间点的状态,动画发生时,就是从第一个状态到第二个状态进行过渡,然后从第二个状态到第三个状态进行过渡,直到最后一个状态。一般来说,0%和100%这两个关键帧是必须要定义的。
关键帧的书写方式很灵活,一行可以写多个关键帧。
甚至它们之间的空格也是可以不要的。
现在我们知道了怎么去定义一个关键帧动画了,那怎么去实现这个动画呢?其实很简单,只要把这个动画绑定到某个要进行动画的元素上就行了。
把动画绑定到元素上,我们可以使用animation属性。animation属性有以下这些:
像前面讲的transition属性一样,也可以把这些animation属性简写到一个animation中,使用默认值的也可以省略掉。但 animation-play-state 属性不能简写到animation中。
只要像这样把定义好的动画绑定到元素上,就能实现关键帧动画了,而不是像第一种过渡动画那样,需要一个状态的改变才能触发动画。
注意,为了达到最佳的浏览器兼容效果,在实际书写代码的时候,还必须加上各大浏览器的私有前缀
animate.css的使用
animate.css是一个css3动画库,可以到github上去下载,里面预设了很多种常用的动画,可以先在本页看下演示效果,使用也很简单,因为它是把不同的动画绑定到了不同的类里,所以我们想要使用哪种动画的时候,只需要简单的把那个相应的类添加到元素上就行了:
首先在head中引入下载的animate.css文件
然后你想要哪个元素进行动画,就给那个元素添加上animated类 以及特定的动画类名,animated是每个要进行动画的元素都必须要添加的类。
假设使用jquery,要给一个id为demo的元素添加一个摇动的动画,因为摇动的动画类名为shake,所以代码是这样的:
这样载入页面,元素就能动起来了。你也可以在动画完成后,把动画类移除,以便可以再次进行同一个动画。
至于动画的配置参数,比如动画持续时间,动画的执行次数等等,你可以在你的的元素上自行定义,覆盖掉animate.css里面所定义的就行了。
注意这些属性还要记得加上各浏览器的前缀。
总之是很灵活的,说到底不就是一个css文件吗,一看就懂的,你在里面想怎么整就怎么整,不想用它提供的类名,就在里面改掉就行了。如果你只想用里面的部分动画,也可以把那些要使用的动画分离出来,它的官网也提供了这样的功能。
下面展示了animate.css里面提供的所有动画,动画名就是类名,你想使用哪个动画,加上这个类名就行了。
shake flash swing bounce tada wobble pulse
flip flipInX flipOutX flipInY flipOutY
fadeIn fadeInUp fadeInDown fadeInLe ftfadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig
fadeOutfadeOutUpfadeOutDownfadeOutLeftfadeOutRightfadeOutUpBigfadeOutDownBigfadeOutLeftBigfadeOutRightBig
slideInDownslideInLeftslideInRightslideOutUpslideOutLeftslideOutRight
bounceInbounceInDownbounceInUpbounceInLeftbounceInRight
bounceOutbounceOutDownbounceOutUpbounceOutLeftbounceOutRight
rotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRight
rotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRight
lightSpeedInlightSpeedOuthingerollInrollOut
相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期,如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决,对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群
907694362jq.qq.com
css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用相关推荐
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 前端之vue3使用动画库animate.css(含动画、过渡)
动画与过渡 一.动画效果 1.默认动画 实例 动画语法 2.给transition指定name 二.过渡效果 三.多个元素过渡 四.vue3使用动画库 动画库animate.css √ 五.总结 一. ...
- vue动画库-Animate.css的使用以及部分问题
vue动画库-Animate.css的使用以及部分问题 Animate.css在vue脚手架中的使用 详情见官网: Animate.css | A cross-browser library of C ...
- 强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
- 前端进阶必学必会动画学习之Animate.css的使用与解析:一个强大而酷炫的CSS3动画库Animate.css使用方法教程
简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut). ...
- 动画库Animate.css
笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...
- 性能强悍的CSS动画库--Animate.css
前言 互联网圈子里有造"轮子"的说法,能用现成的就不要自己去捣鼓了,既省时又省力!今天介绍的就是一款性能强悍的CSS动画库(Animate.css)的使用指导. 安装方法 方法一: ...
- 经典动画库 animate.css 的应用
一.animate.css animate.css::Animate.css 就像嗑水那么简单的CSS动画. 官网:Redirecting to Animate.css Animate.css是一个纯 ...
- Vue引用第三方动画库animate.css
搜索animate.css - npm 进入它的主页,就可以看到很多动画样式 在vscode中安装animate.css 在使用的组件上引用它 给要使用的元素加上animata_animated an ...
最新文章
- 详解MariaDB数据库的触发器
- eclipse折叠所有代码快捷键
- Digit Sum II(	ABC044ARC060)
- 根据字段的不同内容分类汇总 - 球队的胜负次数统计
- 在sql server2000的查询分析器里查询oracle的数据
- linux脚本监控某一进程,linux监控某个进程的运行shell脚本
- for mew歌词 shell_求shell for mew的中文歌词
- Python实现机房管理软件的文件分发功能
- Thin的DateChooser代码学习(getScrollPosition)(原创,转载请声明)
- C语言变量声明内存分配
- Git更新本地分支信息
- 怎样裁剪PDF文件中的页面
- 禁用IE设置代理检测不通过怎么办!
- MSP430F149--点亮LED灯程序代码
- wxPython 俄罗斯方块游戏
- 小知识:btn.addEventListener is not a function报错处理
- 适合旅游时住的各地旅馆 超级便宜,绝对实用,谢谢分享!有好东西大家共享!
- 关于Java平台无关性你该知道这些
- linux文件系统安全模型与()属性相关,《Linux系统安全.》.ppt
- 5个视频剪辑必用网站
热门文章
- 如何创建最简单的 ABAP 数据库表,以及编码从数据库表中读取数据 (上)
- SAP OData 的 V2 模型
- 如何以 mock server 的方式本地启动 SAP UI5 应用,使它不连接服务器端 OData 服务
- SAP Spartacus 和Jerry Sandbox应用Store引用的source字段类型差异
- 给SAP Spartacus B2B list增加用户提示信息
- SAP Spartacus HTTP请求url里的语言和货币参数是如何加上去的
- SAP Spartacus routing参数的权重和HTTP校验逻辑
- SAP云平台上的Low Code Development(低代码开发)解决方案
- role cache - set data user parameter - /UI2/CACHE_DISABLE
- sap.m.list render initialization process