Animate.css的简单使用
Animate.css的简单使用
animate.css是一个基于css3 animation动画库，库中预设了几乎所有日常开发中的需求
animate.css 的官网为：https://animate.style
一、安装方式
CDN 地址：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
animate.css地址：链接：https://pan.baidu.com/s/1wxEWXJ7cBydb9afJkYoGLw 提取码：uphx
二、animate.css 4.x区别和使用方法
animate.css 4.x版本迎来了重大改变，不仅添加了更多动画效果，引用前缀也进行了改变。
在3.x版本时，基本类 都是加animated ，在4.x版本 加 animate__animated，就是要加 animate__ 前缀。注意区别版本
<h1 class="animate__animated animate__pulse">An animated 4.x element</h1> <h1 class="animated pulse">An animated 3.x element</h1>
三、animate.css 4.x的基本使用方法
安装Animate.css之后，将该类animate__animated以及 动画名称 添加到元素中（不要忘记animate__前缀！）
动画名称就是Animate官网提供给我们的css类名,当我们鼠标移动到某个类名 可以点击右边的 直接复制类名称 （此时案例复制的类名称为 animate__bounce）
注意，在使用动画名称时还要讲基本类名称animate__animated，一起添加，才能起作用。
右侧的英文比较多，这里提供了一些主要的类名中午注释
fade: { title: '淡入淡出', fadeIn: '淡入', fadeInDown: '向下淡入', fadeInDownBig: '向下快速淡入', fadeInLeft: '向右淡入', fadeInLeftBig: '向右快速淡入', fadeInRight: '向左淡入', fadeInRightBig: '向左快速淡入', fadeInUp: '向上淡入', fadeInUpBig: '向上快速淡入', fadeOut: '淡出', fadeOutDown: '向下淡出', fadeOutDownBig: '向下快速淡出', fadeOutLeft: '向左淡出', fadeOutLeftBig: '向左快速淡出', adeOutRight: '向右淡出', fadeOutRightBig: '向右快速淡出', fadeOutUp: '向上淡出', fadeOutUpBig: '向上快速淡出' }, bounce: { title: '弹跳类', bounceIn: '弹跳进入', bounceInDown: '向下弹跳进入', bounceInLeft: '向右弹跳进入', bounceInRight: '向左弹跳进入', bounceInUp: '向上弹跳进入', bounceOut: '弹跳退出', bounceOutDown: '向下弹跳退出', bounceOutLeft: '向左弹跳退出', bounceOutRight: '向右弹跳退出', bounceOutUp: '向上弹跳退出' }, zoom: { title: '缩放类', zoomIn: '放大进入', zoomInDown: '向下放大进入', zoomInLeft: '向右放大进入', zoomInRight: '向左放大进入', zoomInUp: '向上放大进入', zoomOut: '缩小退出', zoomOutDown: '向下缩小退出', zoomOutLeft: '向左缩小退出', zoomOutRight: '向右缩小退出', zoomOutUp: '向上缩小退出' }, rotate: { title: '旋转类', rotateIn: '顺时针旋转进入', rotateInDownLeft: '从左往下旋入', rotateInDownRight: '从右往下旋入', rotateInUpLeft: '从左往上旋入', rotateInUpRight: '从右往上旋入', rotateOut: '顺时针旋转退出', rotateOutDownLeft: '向左下旋出', rotateOutDownRight: '向右下旋出', rotateOutUpLeft: '向左上旋出', rotateOutUpRight: '向右上旋出' }, flip: { title: '翻转类', flipInX: '水平翻转进入', flipInY: '垂直翻转进入', flipOutX: '水平翻转退出', flipOutY: '垂直翻转退出' }, strong: { title: '强调类', bounce: '弹跳', flash: '闪烁', pulse: '脉冲', rubberBand: '橡皮筋', shake: '左右弱晃动', swing: '上下摆动', tada: '缩放摆动', wobble: '左右强晃动', jello: '拉伸抖动' }
基本使用方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/> <style type="text/css"> /* 对某个动画名称设置一个周期的时间，缺点就是这个只能对单一某个动画进行设置 */ .animate__pulse { --animate-duration: 5s; --animate-delay: 5.9s; } /* 将所有的动画设置动画时间*/ :root { --animate-duration: 2000ms; } /*直接调用关键帧名称*/ p{ animation-name:jello ; animation-duration: 2s; animation-delay: 1.5s; } </style> </head> <body> <p>hgtftgfgjfjnghf</p> <h1 class="animate__animated animate__pulse">An animated 4.x element</h1> <h1 class="animate__animated animate__heartBeat">An animated 4.x element</h1> <h1 class="animate__animated animate__jello">An animated 4.x element</h1> </body> </html>
本文来自博客园，作者：三线码工，转载请注明原文链接：https://www.cnblogs.com/shangrao/p/13046672.html
