CSS3动画效果Animate.css基本使用方法

最新推荐文章于 2024-08-28 17:58:52 发布

一路向前的月光

最新推荐文章于 2024-08-28 17:58:52 发布

阅读量942

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/a99101/article/details/128948287

版权

animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。官方文档

因为只有部分页面会使用所以建议cdn添加

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>

下载安装 4.0.0版本和一下版本存在使用区别

npm install animate.css 这个话直接下载的是最新版本的
npm install animate.css@0.0.0 这个@后面表示的是版本号 表示下载指定版本的

cdn的引用链接可以直接复制相关代码

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css" rel="stylesheet">

记得main.js引入使用

import animated  from 'animate.css'
Vue.use(animated)

使用区别

4.0.0版本以后的

安装Animate.css后，添加该类animate__animated元素，以及任何动画名称(不要忘记animate__前缀！):

<style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
        	}
    </style>

<body>
    <div id="box" class="animate__animated animate__backInDown"></div>
  	//使用方法，在class里加上类animate__animated与任何动画名称一起添加到元素,此处为抖动效果
</body>  
 animate__delay-2s
/*在类名后面添加延迟,延迟多少秒后执行范围为1~5,超出无效*/

4.0.0版本之前

<div class="animated fadeInUp"
class="animated fadeInDown">
    <div v-show="show">
       。。。。。。一些代码片段
    </div>
</div>

一路向前的月光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫