使用CDN实现动画效果，animate.css演示，cdn视频教程-「好主机」

首页 / 新加坡VPS推荐 / 正文

使用CDN实现动画效果，animate.css演示，cdn视频教程

Time：2024年12月01日 Read：10 评论：42 作者：y21dr45

背景介绍

使用CDN实现动画效果，animate.css演示，cdn视频教程

在现代网络开发中，动画效果已经成为提升用户体验的重要手段之一，CSS动画因其简单、高效的特性而被广泛应用，animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单，本文将详细介绍animate.css的基本使用方法，并通过实例展示其在实际项目中的应用。

文章目录

1、[简介](#简介)

2、[引入方法](#引入方法)

- CDN引入

- NPM安装

3、[基本用法](#基本用法)

4、[动画分类及演示](#动画分类及演示)

- Attention（晃动效果）

- bounce（弹性缓冲效果）

- fade（透明度变化效果）

- flip（翻转效果）

- rotate（旋转效果）

- slide（滑动效果）

- zoom（变焦效果）

- special（特殊效果）

5、[自定义动画](#自定义动画)

6、[处理动画结束事件](#处理动画结束事件)

7、[(#

简介

在网页设计中，动画效果能够极大地吸引用户的注意力并提升用户体验，animate.css提供了一种简便的方法来为元素添加动画效果，无需编写复杂的CSS或JavaScript代码，通过简单地引入animate.css库并添加相应的类名，即可实现各种动画效果。

引入方法

CDN引入

通过CDN引入animate.css是最便捷的方式之一，只需在你的HTML文档的<head>部分添加以下链接即可：

<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">

这样，你就可以在项目中使用animate.css提供的所有动画效果了。

NPM安装

如果你的项目使用了Node.js，你可以通过npm安装animate.css：

$ npm install animate.css

然后在你的CSS文件中导入animate.css：

@import '~animate.css/animate.css';

或者在你的JavaScript文件中：

import 'animate.css';

基本用法

animate.css的使用非常简单，因为它是把不同的动画绑定到了不同的类里，想要使用哪种动画，只需要把通用类animated和相应的类添加到元素上就行了，要使一个元素弹跳，只需添加animated bounce两个类：

<div class="animated bounce"></div>

动画分类及演示

Attention（晃动效果）

这一类动画主要用于吸引注意力，包括以下几种效果：

bounce: 弹跳效果

flash: 闪烁效果

pulse: 脉冲效果

rubberBand: 橡胶带效果

shake: 震动效果

headShake: 头部摇晃效果

swing: 摆动效果

tada: 摇摆并缩放效果

wobble: 摆动效果

jello: 果冻效果

示例：

<div class="animated flash"></div>

bounce（弹性缓冲效果）

这一类动画模拟弹性运动，包括以下几种效果：

bounceIn: 弹跳进入

bounceInDown: 向下弹跳进入

bounceInLeft: 向左弹跳进入

bounceInRight: 向右弹跳进入

bounceInUp: 向上弹跳进入

bounceOut: 弹跳出去

bounceOutDown: 向下弹跳出去

bounceOutLeft: 向左弹跳出去

bounceOutRight: 向右弹跳出去

bounceOutUp: 向上弹跳出去

示例：

<div class="animated bounceIn"></div>

fade（透明度变化效果）

这一类动画通过改变透明度来实现淡入淡出的效果，包括以下几种效果：

fadeIn: 淡入

fadeInDown: 向下淡入

fadeInDownBig: 大幅度向下淡入

fadeInLeft: 向左淡入

fadeInLeftBig: 大幅度向左淡入

fadeInRight: 向右淡入

fadeInRightBig: 大幅度向右淡入

fadeInUp: 向上淡入

fadeInUpBig: 大幅度向上淡入

fadeOut: 淡出

fadeOutDown: 向下淡出

fadeOutDownBig: 大幅度向下淡出

fadeOutLeft: 向左淡出

fadeOutLeftBig: 大幅度向左淡出

fadeOutRight: 向右淡出

fadeOutRightBig: 大幅度向右淡出

fadeOutUp: 向上淡出

fadeOutUpBig: 大幅度向上淡出

示例：

<div class="animated fadeIn"></div>

flip（翻转效果）

这一类动画通过翻转元素来实现视觉效果，包括以下几种效果：

flip: 翻转

flipInX: X轴翻转进入

flipInY: Y轴翻转进入

flipOutX: X轴翻转出去

flipOutY: Y轴翻转出去

示例：

<div class="animated flip"></div>

rotate（旋转效果）

这一类动画通过旋转元素来实现视觉效果，包括以下几种效果：

rotateIn: 旋转进入

rotateInDownLeft: 左下角旋转进入

rotateInDownRight: 右下角旋转进入

rotateInUpLeft: 左上角旋转进入

rotateInUpRight: 右上角旋转进入

rotateOut: 旋转出去

rotateOutDownLeft: 左下角旋转出去

rotateOutDownRight: 右下角旋转出去

rotateOutUpLeft: 左上角旋转出去

rotateOutUpRight: 右上角旋转出去

示例：

<div class="animated rotateIn"></div>

slide（滑动效果）

这一类动画通过滑动元素来实现视觉效果，包括以下几种效果：

slideInDown: 向下滑动进入

slideInLeft: 向左滑动进入

slideInRight: 向右滑动进入

slideInUp: 向上滑动进入

slideOutDown: 向下滑动出去

slideOutLeft: 向左滑动出去

slideOutRight: 向右滑动出去

slideOutUp: 向上滑动出去

示例：

<div class="animated slideInUp"></div>

zoom（变焦效果）

这一类动画通过变焦元素来实现视觉效果，包括以下几种效果：

zoomIn: 放大进入

zoomInDown: 向下放大进入

zoomInLeft: 向左放大进入

zoomInRight: 向右放大进入

zoomInUp: 向上放大进入

zoomOut: 放大出去

zoomOutDown: 向下放大出去

zoomOutLeft: 向左放大出去

zoomOutRight: 向右放大出去

zoomOutUp: 向上放大出去

示例：

<div class="animated zoomIn"></div>

special（特殊效果）

这一类动画包含了一些特殊的动画效果，包括以下几种效果：

hinge: 铰链效果

rollIn: 滚动进入

rollOut: 滚动出去

lightSpeedIn: 快速进入

lightSpeedOut: 快速出去

示例：

<div class="animated hinge"></div>

自定义动画

默认情况下，animate.css中的动画只播放一次，持续1秒，如果需要更改这些设置，可以直接在你的CSS文件中添加一些规则，要让某个元素的动画持续2秒并无限循环播放，可以这样做：

.myElement {
  animation-duration: 2s; /* 持续时间 */
  animation-iteration-count: infinite; /* 无限循环 */
}

原文链接：https://www.asoulu.com/post/96704.html

上一篇：吉林CDN代办，高效、便捷的网络加速解决方案

下一篇：使用CDN很慢的原因分析，用了cdn反而慢了

标签： cdn演示动画

CDN引入

NPM安装

Attention（晃动效果）

bounce（弹性缓冲效果）

fade（透明度变化效果）

flip（翻转效果）

rotate（旋转效果）

slide（滑动效果）

zoom（变焦效果）

special（特殊效果）

1. 引言