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

• vue-lottie

  仅支持 Vue2

• lottie-web-vue

  1.2.1 及以下版本支持 Vue2, 2.x.y 版本支持 Vue3

React & React Native

• react-lottie
• lottie-react-native

Flutter

• lottie

翻牌动画

翻牌效果指点击元素翻转过去显示另一面, 再次点击则翻转为初始面, 翻转方向有:

• (横向) 左右翻转
• (纵向) 上下翻转

可参考例子:

• HTML + CSS 制作翻牌效果

书籍翻页动画

书籍翻页动画指模拟实际翻书时的动作

• turn.js

图片预览动画

图片预留动画指小图片和大图片位移、尺寸动画:

• 点击小图, 产生位移动画和尺寸放大动画
• 点击大图以外区域或滚动页面, 产生位移动画和尺寸缩小动画

此动画效果可见于以下网站:

• Medium

• 知乎

• medium-zoom

列表动画

列表形式:

• (少见) 横向排布, 超出滚动
• (最为常见) 竖向排布, 每一项单独成行
• 宫格排布, 如 3 x 4 布局等, 典型例子为英雄联盟选择英雄界面

列表的操作有:

• 入场, 指列表渲染时的入场
• 上移, 通过按钮实现的列表项上移
• 下移, 通过按钮实现的列表项下移
• 拖拽, 长按拖拽, 包含不可拖拽、拖拽过程中、拖拽取消、拖拽完成时动画
• 删除, 如带回弹效果的侧滑删除

可参考内容:

• 列表动画 - Ant Motion

左右抖动动画

• Animate.css shakeX
• UniAPP 左右抖动效果

加载动画

HTML + CSS

Lottie

Contributors

why

Changelog

Last edited 2 minutes ago

View full history

da5df4d-feat: update