自己整理的css3动画库,附下载链接

cyrna      2022-02-11     585

关键词:

动画调用语法
animation: bounceIn 0.3s ease 0.2s 1 both;
按顺序解释参数:
动画名称 如:bounceIn
一周期所用时间 如:0.3s
速度曲线 如:ease
描述
linear
动画从头到尾的速度是相同的。
ease
默认。动画以低速开始,然后加快,在结束前变慢。
ease-in
动画以低速开始。
ease-out
动画以低速结束。
ease-in-out
动画以低速开始和结束。
cubic-bezier(n,n,n,n)
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
动画开始时间 如: 0.2s
播放次数 如:1 如果要一直循环就设置 infinite
动画在播放之前或之后,其动画效果是否可见 如:both
描述
none
不改变默认行为。
forwards
当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards
在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both
向前和向后填充模式都被应用。
兼容性设置动画
-webkit-animation:bounceInDown 0.3s ease 0.2s 1 both;
-moz-animation:bounceInDown 0.3s ease 0.2s 1 both;
-ms-animation:bounceInDown 0.3s ease 0.2s 1 both;
-o-animation:bounceInDown 0.3s ease 0.2s 1 both;
animation: bounceInDown 0.3s ease 0.2s 1 both;
 
本css中的动画效果
vanishIn 中心缩小的模糊变清楚后显示
vanishOut 中心放大清楚变模糊后消失
twisterInUp 从右侧螺旋转进来放大
slideUp 向上移动
slideDown 向下移动
puffOut 中心放大清楚变粒子后消失
puffIn 从外向中心缩小出现
twisterInDown 从左侧螺旋转进来放大
rollIn 从左侧翻滚进来
lightSpeedIn 从右侧光速进入
lightSpeedOut 光速出去
fadeIn 原地淡入·
fadeOut 原地淡出
fadeInLeft 从左侧移入,淡入
fadeInRight 从右侧移入,淡入
fadeInDown 从上方移入,淡入
fadeInUp 从下方移入,淡入
fadeOutDown 向下移出,淡出
fadeOutLeft 向左移出,淡出
fadeOutRight 向右移出,淡出
fadeOutUp 向上移出,淡出
swing 扭动摇晃
wobble 左右大幅度摇晃
rotateIn 旋转360度
flip 横向翻转
zoomIn 中心放大显示
zoomOut 向中心缩小消失
bounceIn 从中心扩大弹出显示
bounceInLeft 从左侧弹入
bounceInRight 从右侧弹入
bounceInUp 向上弹入
bounceInDown 向下弹入
bounceOut 向中心弹出消失
bounceOutDown 向下弹消失
bounceOutLeft 向左弹消失
bounceOutRight 向右弹消失
bounceOutUp 向上弹消失
rollOut 向右滚出消失
rubberBand 原地弹性弹一下
heartbeat 原地像心跳一样弹一下
flipOutY y轴翻转消失
flipInX x轴翻转显示
flipInY y轴翻转显示
flipOutX x轴翻转消失
tada 原地抖动
jello 原地斜向抖动
flash 原地闪烁
pulse 原地轻微放大后还原
sharp 模糊到清楚显现
scaleUp 原地放大
scaleDown 原地缩小
blur 原地变模糊保持模糊状态
start 闪现一下消失
rightflip 闪现一下向右消失
shake 原地抖动
hinge 剥落
boingInUp 向前荡入
holeOut 缩小翻转收走
 
最后附:下载连接

css3常用动画+动画库

animate.css是来自dropbox的工程师DanielEden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现。 查看演... 查看详情

kissui.scrollanim页面滚动动画库插件(代码片段)

简介kissui.scrollanim是一款实用的纯JS和CSS3页面滚动动画库插件。通过该插件可以使元素进入浏览器视口的时候,展示指定的CSS3动画效果。下载地址及演示在线演示在线下载安装可以通过bower来安装kissui.scrollanim插件。bowerinstallkissu... 查看详情

动画库animate.css的用法

简介animate.css是一个来自国外的CSS3动画库,它预设了引起弹跳(bounce)、摇摆(swing)、颤抖(wobble)、抖动(shake)、闪烁(flash)、翻转(flip)、旋转(rotate)、淡入淡出(fade)、滑动(Sliding)、光速(lightspeed)、缩放变... 查看详情

animate.css_css3动画库介绍

...性好使用方便。Animate.css是一个有趣的,跨浏览器的css3动画库。很值得我们在项目中引用。用法1、首先引入animatecss文件123<head>  <link rel="stylesheet" href="animate.min.css"></hea 查看详情

animy.js,自己编写的功能丰富的html动画库

...体的教程、源代码、源代码压缩文件一起压缩成rar传到了自己的空间。依照老惯例。本人发表的东西都是彻底开源的,欢 查看详情

uni-app引入css动画库

引入Animate动画库Animate中文网地址:http://www.animate.net.cn/Animate下载地址:https://daneden.github.io/animate.css/下载Animate.css在app.vue中引入动画库使用动画库:animated+动画End! 查看详情

前端资源大整理

资源不断更新中。。。动画库1.Animate.css说明:一个简单易用的跨浏览器CSS动画库。GitHub主页:https://github.com/daneden/animate.css2.CSShake说明:用CSS实现各种颠颤动画效果DOM!GitHub主页:https://github.com/elrumordelaluz/csshake3.Hover.css说明:... 查看详情

第三方动画库使用方法

第三方动画库的使用1.名字叫:animate.css2.封装了很多工作中常用的动画3.在使用第三方时候,需要加上animated类名首先https://daneden.github.io/animate.css/下载animate.csslink进head中第一种方法<divclass="myWorld">我的世界</div><style>.my... 查看详情

精心整理linux各版本安装包(包括centosredhatoraclelinux)☀️附下载链接☀️(代码片段)

...OracleLinux三个版本,平时工作中也陆陆续续的有收集整理,但是一直不完整,正好最近整理了Oracle安装包合集,于是就顺便整理了一版Linux安装包合集,分享给大家。前段时间我朋友找我要Linux安装包,我发... 查看详情

精心整理linux各版本安装包(包括centosredhatoraclelinux)☀️附下载链接☀️(代码片段)

...OracleLinux三个版本,平时工作中也陆陆续续的有收集整理,但是一直不完整,正好最近整理了Oracle安装包合集,于是就顺便整理了一版Linux安装包合集,分享给大家。前段时间我朋友找我要Linux安装包,我发... 查看详情

推荐11个好用的js动画库(代码片段)

 为了保证的可读性,本文采用意译而非直译。1.Three.js  超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用WebGL。这个库提供了<canvas>、<svg>、CSS3D和WebGL渲染器,让咱们在设备和... 查看详情

wpfloading加载动画库

原文:WPFloading加载动画库 1.下载Dll??????https://pan.baidu.com/s/1wKgv5_Q8phWo5CrXWlB9dA2.在项目中添加引用???????略3.在Xaml中引入名称空间?????xmlns:myLib="clr-namespace:MyLoadingLib;assembly=MyLoadingLib"4.使用代码??? 查看详情

花钱都买不到的绝版oracle数据库最全版本安装包(精心整理)附下载链接,建议收藏!(代码片段)

...言很多朋友苦于下载不到Oracle的软件安装包,于是我整理了一下上传到网盘以供下载。从上图可以看出,随着Oracle版本升级,对以前的版本不再支持,也就意味着,官网不再提供下载方式,也就导致很多朋... 查看详情

只会excel想做图表可视化,让数据动起来?可以,快来围观啦(附大量模板下载)

...各种模板。很不巧,我也是初次涉及到这种,就查询百度整理了一份使用教程,文末附模板下载。对于之前的有想要了 查看详情

aos.js超赞页面滚动元素动画jquery动画库

aos.js超赞页面滚动元素动画jQuery动画库插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果。在页面往回滚动时,元素会恢复到... 查看详情

facebookrebound弹性动画库源码分析

Rebound源码分析让动画不再僵硬:FacebookReboundAndroid动画库介绍一文中介绍了rebound这个库。对于想体验一下rebound的效果,又懒得clone和编译代码的,这里提供一个demoapk。今天看到了tumblr发布了基于rebound的Backboard,本想直接分析一... 查看详情

velocity.js动画库使用

...Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和jQuery完美协作,并和$.animate()有相同的API,但它不依赖jQuery,可单独使用。  2、兼容性可兼容到IE8和Android2.3。若需要兼容IE8,就必须引入jQuery1.x 3、... 查看详情

花钱都买不到的绝版oracle数据库最全版本安装包(精心整理)附下载链接,建议收藏(代码片段)

作者简介作者:LuciferLiu,中国DBA联盟(ACDU)成员。目前主要从事OracleDBA工作,曾从事Oracle数据库开发工作,主要服务于生产制造,汽车金融等行业。现拥有OracleOCP,OceanBaseOBCA认证,擅长Oracle数据库运维... 查看详情