animate.css

animate.css

• 晃动效果
• 弹性缓冲效果
• 透明度变化效果
• 翻转效果
• 旋转效果
• 滑动效果
• 变焦效果
• 特殊效果

可以元素嵌套混合效果，一个小例子，嵌套了bounceInDown，wobble效果，并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-1s，delay-2s，delay-3s，delay-4s，delay-5s 延迟
• fast，faster 持续时间：快
• slow，slower 持续时间：慢

晃动效果

• 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

• 点赞
• 收藏
• 分享
• • 文章举报

kikpin 发布了19 篇原创文章 · 获赞 5 · 访问量 6244 私信 关注

标签：晃动,效果,变焦,delay,特殊效果,animate,css
来源： https://blog.csdn.net/qq_36484899/article/details/104077358