动画调用语法
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 缩小翻转收走
如对本文有疑问，
点击进行留言回复！！
我要评论
网友评论