Animate.css跨浏览器的 css3 动画库

联合创作 · 2023-09-24 02:43

Animate.css 是一个有趣的,跨浏览器的 css3 动画库,内置了很多典型的 css3 动画,兼容性好使用方便。

安装

使用 npm 安装:

$ npm install animate.css --save 

或者使用 Yarn 安装:

$ yarn add animate.css 

将其导入文件:

import 'animate.css'; 

或者使用 CDN 将其直接添加到网页:

<head> <link rel="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

可以直接使用提供的动画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! */ } 

请注意,某些动画依赖于animation-timing动画类上设置的属性。

浏览 7
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报