CSS3动画库Animate.css动画样式和使用方法

html+css 725 0 2023-05-04

CSS3动画库Animate.css动画样式和使用方法

CSS3 动画库animate.css,动画效果包括:抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多种动画效果,几乎包含了所有常见的动画效果。

官方下载:https://animate.style/

动画效果样式:

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>


上一篇:微信小程序实现商品列表展示

下一篇:没有了

讨论数量:0

请先登录再发表讨论。 2024-06-14

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链