CSS 动画合集
库
- Framer Motion
- Ant Motion
- react-native-motion
- React Native Animations
- react-spring
- moti
- flubber
- Animate.css
- loading.io
- useAnimations
- LottieFiles
- svgator
- cssload spinners
Lottie
Vue
仅支持
Vue21.2.1及以下版本支持Vue2,2.x.y版本支持Vue3
React & React Native
Flutter
翻牌动画
翻牌效果指点击元素翻转过去显示另一面, 再次点击则翻转为初始面, 翻转方向有:
- (横向) 左右翻转
- (纵向) 上下翻转
可参考例子:
书籍翻页动画
书籍翻页动画指模拟实际翻书时的动作
图片预览动画
图片预留动画指小图片和大图片位移、尺寸动画:
- 点击小图, 产生位移动画和尺寸放大动画
- 点击大图以外区域或滚动页面, 产生位移动画和尺寸缩小动画
此动画效果可见于以下网站:
列表动画
列表形式:
- (少见) 横向排布, 超出滚动
- (最为常见) 竖向排布, 每一项单独成行
- 宫格排布, 如
3 x 4布局等, 典型例子为英雄联盟选择英雄界面
列表的操作有:
- 入场, 指列表渲染时的入场
- 上移, 通过按钮实现的列表项上移
- 下移, 通过按钮实现的列表项下移
- 拖拽, 长按拖拽, 包含不可拖拽、拖拽过程中、拖拽取消、拖拽完成时动画
- 删除, 如带回弹效果的侧滑删除
可参考内容:
左右抖动动画
- Animate.css
shakeX - UniAPP 左右抖动效果
加载动画
HTML + CSS
Lottie
Contributors
why