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

动画调用语法

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动画库，附下载链接

最新文章

热门文章