animate.css

animate.css

可以元素嵌套混合效果,一个小例子,嵌套了bounceInDownwobble效果,并delay-2s延迟执行

分类:

  • Attention晃动效果
  • Bounce弹性缓冲效果
  • Fade透明度变化效果
  • Flip翻转效果
  • Rotate旋转效果
  • Slide滑动效果
  • Zoom变焦效果
  • Special特殊效果

自定义配置

	//初始,默认
    #yourElement{
    animate-duration: 1ms !important;    //动画持续时间
    transition-duration: 1ms !important;
    // animate-delay: 0;    //动画延迟时间
    animate-iteration-count: 1 !important;    //动画执行次数
    }
  • infinite无限循环
  • delay-1sdelay-2sdelay-3sdelay-4sdelay-5s 延迟
  • fastfaster 持续时间:快
  • slowslower 持续时间:慢

晃动效果

  • bounce 弹跳
  • flash 闪烁
  • pulse 放大,缩小
  • rubberBand 放大,缩小,弹簧
  • shake 左右晃动
  • headShake 左右小幅晃动
  • swing 左右扇形摇摆
  • tada 放大,左右上下晃动,缩小
  • wobble 左右小幅(圆点较远)扇形摇摆
  • jello 左右左右上下晃动

弹性缓冲效果

  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp

透明度变化效果

  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig

翻转效果

  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY

旋转效果

  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight

滑动效果

  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

变焦效果

  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

特殊效果

  • hinge
  • rollIn
  • rollOut
  • lightSpeedIn
  • lightSpeenOut
animate.cssanimate.css kikpin 发布了19 篇原创文章 · 获赞 5 · 访问量 6244 私信 关注
上一篇:@keyframes动画和animate.css


下一篇:211 jQuery 自定义动画:animate()