
CSS3 动画库animate.css,动画效果包括:抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多种动画效果,几乎包含了所有常见的动画效果。
动画效果样式:
| Attention seekers | Back entrances | Bouncing entrances | Fading entrances | Rotating entrances |
| bounce | backInDown | bounceIn | fadeIn | rotateIn |
| flash | backInLeft | bounceInDown | fadeInDown | rotateInDownLeft |
| pulse | backInRight | bounceInLeft | fadeInDownBig | rotateInDownRight |
| rubberBand | backInUp | bounceInRight | fadeInLeft | rotateInUpLeft |
| shakeX | bounceInUp | fadeInLeftBig | rotateInUpRight | |
| shakeY | Back exits | fadeInRight | ||
| headShake | backOutDown | Bouncing exits | fadeInRightBig | Rotating exits |
| swing | backOutLeft | bounceOut | fadeInUp | rotateOut |
| tada | backOutRight | bounceOutDown | fadeInUpBig | rotateOutDownLeft |
| wobble | backOutUp | bounceOutLeft | fadeInTopLeft | rotateOutDownRight |
| jello | bounceOutRight | fadeInTopRight | rotateOutUpLeft | |
| heartBeat | Specials | bounceOutUp | fadeInBottomLeft | rotateOutUpRight |
| hinge | fadeInBottomRight | |||
| Flippers | jackInTheBox | Zooming entrances | Sliding entrances | |
| flip | rollIn | zoomIn | Fading exits | slideInDown |
| flipInX | rollOut | zoomInDown | fadeOut | slideInLeft |
| flipInY | zoomInLeft | fadeOutDown | slideInRight | |
| flipOutX | zoomInRight | fadeOutDownBig | slideInUp | |
| flipOutY | zoomInUp | fadeOutLeft | ||
| fadeOutLeftBig | Sliding exits | |||
| Lightspeed | Zooming exits | fadeOutRight | slideOutDown | |
| lightSpeedInRight | zoomOut | fadeOutRightBig | slideOutLeft | |
| lightSpeedInLeft | zoomOutDown | fadeOutUp | slideOutRight | |
| lightSpeedOutRight | zoomOutLeft | fadeOutUpBig | slideOutUp | |
| lightSpeedOutLeft | zoomOutRight | fadeOutTopLeft | ||
| zoomOutUp | fadeOutTopRight | |||
| fadeOutBottomRight | ||||
| fadeOutBottomLeft | ||||
使用方法:
引入样式:
<link rel="stylesheet" href="animate.min.css?v=4.1.1">
调用样式:
<h2 class="animate__animated animate__wobble">CSS3动画库 Animate.css</h2>
上一篇:微信小程序实现商品列表展示
下一篇:常用css代码(实用示例)
讨论数量:0