前言

Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。

官方学习文档网址

一、安装使用

安装

使用 npm 安装：

$ npm install animate.css --save

或者使用 Yarn 安装（这只适用于 Webpack、Parcel 等适当的工具。如果您不使用任何工具来打包或捆绑您的代码，您可以简单地使用下面的 CDN 方法）：

$ yarn add animate.css

将其导入您的文件：

import 'animate.css';

或者使用 CDN 将其直接添加到您的网页：

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

二、基本用法

安装 Animate.css 后，将类animate__animated与任何动画名称一起添加到元素（不要忘记animate__前缀！）：

<h1 class="animate__animated animate__bounce">An animated element</h1>

使用@keyframes
尽管该库为您提供了一些帮助类，例如animated让您快速运行的类，但您可以直接使用提供的动画keyframes。这提供了一种灵活的方式来将 Animate.css 用于您当前的项目，而无需重构您的 HTML 代码。

例子：

.my-element {display: inline-block;margin: 0 0.5rem;animation: bounce; /* referring directly to the animation's @keyframe declaration */animation-duration: 2s; /* don't forget to set a duration! */
}

CSS 自定义属性（CSS 变量）
从版本 4 开始，Animate.css 使用自定义属性（也称为 CSS 变量）来定义动画的持续时间、延迟和迭代。这使得 Animate.css 非常灵活和可定制。需要更改动画持续时间？只需在全局或本地设置一个新值。

例子：

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {--animate-duration: 2s;
}/* This changes all the animations globally */
:root {--animate-duration: 800ms;--animate-delay: 0.9s;
}

自定义属性还可以轻松地动态更改所有动画的时间受限属性。这意味着您可以使用 javascript one-liner 获得慢动作或延时效果：

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

1.使用方式

在标签上加上animated 及动画名称：
代码如下（示例）：

<transition name="fade"enter-active-class="animated swing "leave-active-class="animated shake "><div v-if="show">hello world</div>
</transition>

注：animated 类似于全局变量，它定义了动画的持续时间,默认1s；swing是动画具体的动画效果的名称，你可以选择任意的效果。

2.同时使用过渡和动画
代码如下（示例）：

<transition name="fade"type="transition":duration="{enter:5000,leave:10000}"
//enter和leave分别为入场动画和出场动画的时间appearenter-active-class="animated swing fade-enter-active"leave-active-class="animated shake fade-leave-active"appear-active-class="animated swing">
<!--          type="transition" 设置动画是以transition时间为标准结束还是animate时间为标准结束，animate默认时长是1s-->
<!--          appear-active-class 在页面刷新的时候展示动画效果与appear同时使用-->
<!--         :duration="5000" 自定义动画时长 在此结束后才移除class--><div v-if="show">hello world</div>
</transition>
<style scoped>.fade-enter,.fade-leave-to {opacity: 0;}.fade-enter-active {transform-origin: left center;transition: opacity 1s;}.fade-leave-active {transform-origin: left center;transition: opacity 1s;}
</style>

三、keyframes关键帧

<template><div><transition name="fade"><div v-if="show">hello world</div></transition><button @click="change">切换</button></div>
</template><script>
export default {name: 'keyframes',data () {return {show: true}},methods: {change () {this.show = !this.show}}
}
</script><style scoped>@keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.5);}100% {transform: scale(1);}}
//会自动在页面中name为fade的标签上插入这个样式，或者直接在标签上写enter-active-class和leave-active-class，将写好的css样式名字赋上即可.fade-enter-active{transform-origin: left center;animation: bounce-in 1s;}.fade-leave-active{transform-origin: left center;animation: bounce-in 1s reverse;}
</style>

四、transition组件

当元素被transition标签包裹之后，vue会自动分析被包裹的元素的css样式，然后构建一个动画的流程。

在动画开始执行的瞬间会往div标签上增加两个样式：fade-enter、fade-enter-active,当动画第一帧结束开始第二帧的时候，会移除fade-enter样式，同时加上fade-enter-to样式。在动画执行的最后会将fade-enter-active和fade-enter-to都移除。

<template><div><transition name="fade"><div v-if="show">hello world</div></transition><button @click="change">切换</button></div>
</template><script scoped>
export default {name: 'BaseAnimate',data () {return {show: true}},methods: {change () {this.show = !this.show}}
}
</script><style scoped>.fade-enter,.fade-leave-to{opacity: 0;}.fade-enter-active,.fade-leave-active{transition: opacity 1s;}
</style>

初识Animate.css相关推荐

【踩坑笔记】animate.css无效【非版本问题】
之前看前端杂志了解到animate.css动画库,于是决定去学习一下.谁知道遇到了非常多的坑,也很少有博客记录了我这种问题,在此留下笔记,希望能帮到遇到同样问题的人. 初识首先是animate.cs ...
3 css 奖品出现弹出动画_【技术】nuxt中引入wow和animate.css 页面随滚动条出现动画...
1. 通过nodejs安装 cnpm install wowjs --save-dev 安装成功后在"package.json: "wowjs": "^1.1. ...
超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示本地下载通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
html 动画div右侧消失,使用animate.css时，动画一开始不隐藏,如何解决呢？
animate.css 的入场动画,一开始(初始态)怎么隐藏呢?(否则会闪一下.) 动画结束后要保持显示. 补充.. 使用了官网推荐的jquery 扩展代码,运动完后自动删除 class. 这是一个坑 ...
vue过渡和animate.css结合使用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
animate.css动画抖动,Animate.css抖动效果每次都不工作
我正在制作一个Twitch Streamer应用程序,该应用程序使用Twitch API为一组预定义的拖放器提取一些数据.Animate.css抖动效果每次都不工作我有三个按钮来选择所有/在线/离线 ...
使用animate实现页面过度_很多人都在使用的开源CSS动画效果库——animate.css
介绍 animate.css是一堆很酷,有趣且跨浏览器的动画,供你在项目中使用.非常适合强调,主页,滑块和一般的加水效果. animate.css v4正在进行许多改进和重大更改,包括CSS自定义属性 ...
animate.css（第三方动画使用方法）
animation 语法: animation: name duration timing-function delay iteration-count direction; animation-na ...

初识Animate.css

文章目录

前言