Animation动画

CSS Animation动画效果。

时间与类型

  • 使用.vus-anim类作为Animation动画样式,默认ease-out,速度:0.4s。
  • .fast:快速动画,速度:0.25s。
  • .slow:缓慢动画,速度:1s。
  • .linear:linear 动画从头到尾的速度是相同的。
  • .ease:ease 动画以低速开始,然后加快,在结束前变慢。
  • .ease-in:ease-in 动画以低速开始。
  • .ease-in-out:ease-in-out 动画以低速开始和结束。
  • .infinite:infinite 规定动画无限次播放。
暂无演示
<div class="vus-anim">默认</div>
<div class="vus-anim fast">fast</div>
<div class="vus-anim slow">slow</div>
<div class="vus-anim linear">linear</div>
<div class="vus-anim ease">ease</div>
<div class="vus-anim ease-in">ease-in</div>
<div class="vus-anim ease-in-out">ease-in-out</div>

动画效果

  • .vus-anim类中添加以下类可设置不同效果的动画效果:
  • .spin:旋转。
  • .spin-pulse:脉动旋转。
  • .flash:闪烁。
  • .fade-in:逐渐(显示)。
  • .fade-out:逐渐(隐藏)。
  • .up-slide-in:向上滑动(显示)。
  • .up-slide-out:向上滑动(隐藏)。
  • .down-slide-in:向下滑动(显示)。
  • .down-slide-out:向下滑动(隐藏)。
  • .left-slide-in:从左滑动(显示)。
  • .left-slide-out:从左滑动(隐藏)。
  • .right-slide-in:从右滑动(显示)。
  • .right-slide-out:从右滑动(隐藏)。
  • .min-zoom-in:由小到大(显示)。
  • .min-zoom-out:由小到大(隐藏)。
  • .max-zoom-in:由大到小(显示)。
  • .max-zoom-out:由大到小(隐藏)。
  • .up-zoom-in:向上放大出现(贝塞尔)。
  • .down-zoom-in:向下放大出现(贝塞尔)。
  • .left-zoom-in:从左放大出现(贝塞尔)。
  • .right-zoom-in:从右放大出现(贝塞尔)。
  • .flip:翻转。
  • .shake:左右抖动。
  • .bounce:上下反弹跳动。
  • .left-bounce-in:左边反弹滑动(出现)。
  • .left-bounce-out:左边反弹滑动(隐藏)。
  • .right-bounce-in:右边反弹滑动(出现)。
  • .right-bounce-out:右边反弹滑动(隐藏)。
  • .rubber-band:拉橡皮。
<div class="vus-anim spin">spin</div>
<div class="vus-anim spin-pulse">spin-pulse</div>
<div class="vus-anim flash">flash</div>
<div class="vus-anim fade-in">fade-in</div>
<div class="vus-anim fade-out">fade-out</div>
<div class="vus-anim up-slide-in">up-slide-in</div>
<div class="vus-anim up-slide-out">up-slide-out</div>
<div class="vus-anim down-slide-in">down-slide-in</div>
<div class="vus-anim down-slide-out">down-slide-out</div>
<div class="vus-anim left-slide-in">left-slide-in</div>
<div class="vus-anim left-slide-out">left-slide-out</div>
<div class="vus-anim right-slide-in">right-slide-in</div>
<div class="vus-anim right-slide-out">right-slide-out</div>
<div class="vus-anim min-zoom-in">min-zoom-in</div>
<div class="vus-anim min-zoom-out">min-zoom-out</div>
<div class="vus-anim max-zoom-in">max-zoom-in</div>
<div class="vus-anim max-zoom-out">max-zoom-out</div>
<div class="vus-anim up-zoom-in">up-zoom-in</div>
<div class="vus-anim down-zoom-in">down-zoom-in</div>
<div class="vus-anim left-zoom-in">left-zoom-in</div>
<div class="vus-anim right-zoom-in">right-zoom-in</div>
<div class="vus-anim flip">flip</div>
<div class="vus-anim shake">shake</div>
<div class="vus-anim bounce">bounce</div>
<div class="vus-anim left-bounce-in">left-bounce-in</div>
<div class="vus-anim left-bounce-out">left-bounce-out</div>
<div class="vus-anim right-bounce-in">right-bounce-in</div>
<div class="vus-anim right-bounce-out">right-bounce-out</div>
<div class="vus-anim rubber-band">rubber-band</div>