当前位置:首页 > 专题管理

CSS3动画类文档

使用方式

动画的使用非常简单,直接对元素赋值动画特定的 class 类名即可。如:

其中 layui-anim 是必须的,后面跟着的即是不同的动画类
<div class="layui-anim layui-anim-up"></div>
 
循环动画,追加:layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>
内置CSS3动画一览表

下面是不同的动画类名,点击下述绿色块,可直接预览动画

  • 顶部往下滑入
    layui-anim-down
  • 微微往下滑入
    layui-anim-downbit
  • 底部往上滑入
    layui-anim-up
  • 微微往上滑入
    layui-anim-upbit
  • 平滑放大
    layui-anim-scale
  • 弹簧式放大
    layui-anim-scaleSpring
  • 平滑放小
    layui-anim-scalesmall
  • 弹簧式放小
    layui-anim-scalesmall-spring
  • 渐现
    layui-anim-fadein
  • 渐隐
    layui-anim-fadeout
  • 360度旋转
    layui-anim-rotate
  • 循环动画
    追加:layui-anim-loop

本章节内容共分 1 部分:

  1. CSS3动画类文档