css-animation

深扒某秀 css animation 动画库

Usage

在 css 中给元素的 animation 属性里加上动画名称即可：

.ele{
  width: 100px;
  height: 100px;
  background: #000;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 100px;
  animation: jello 2s ease 0s 1 normal none; 
}

Animation list

进入

fadeInDown: '从上到下移入',
fadeInUp: '从下到上移入',
fadeInLeft: '从右到左移入',
fadeInRight: '从左到右移入',
fadeIn: '淡入',
zoomIn: '中心放大',
flipInY: '翻转进入',
puffIn: '缩小进入',
twisterInDown: '魔幻进入',
twisterInUp: '旋转进入',
bounceIn: '中心弹入',
rollIn: '翻滚进入',
lightSpeedIn: '光速进入',
bounceInLeft: '从右到左弹入',
bounceInRight: '从左到右弹入',
bounceInDown: '从上到下弹入',
bounceInUp: '从下到上弹入',

强调

wobble: '摇摆',
rubberBand: '抖动',
flip: '翻转',
rotateIn: '旋转',
swing: '悬摆',
slideDown: '下滑',
tada: '放大抖动',
jello: '倾斜摆动',

退出

fadeOut: '淡出',
fadeOutUp: '从下到上移出',
fadeOutDown: '从上到下移出',
fadeOutLeft: '从右到左移出',
fadeOutRight: '从左到右移出',
bounceOutRight: '从左到右弹出',
bounceOutLeft: '从右到左弹出',
bounceOutUp: '从下到上弹出',
bounceOutDown: '从上到下弹出',
flipOutY: '翻转消失',
bounceOut: '中心消失',
zoomOut: '中心缩小',
rollOut: '翻滚退出',
lightSpeedOut: '光速退出',
puffOut: '放大退出',

背景

scaleUp: '背景放大',
scaleDown: '背景缩小',

Demo

here

limi58/css-animation

css-animation

Usage

Animation list

Demo