正文 

当前位置： 首页 > java > java框架

7.1万star！超实用，60多种动画效果的css库

开源前哨      2022-02-11     200

关键词：

【导语】：animate.css 是一个有趣的，跨浏览器的CSS3 动画库。

简介

animate.css 是一个有趣的，跨浏览器的 css3 动画库，兼容性好，使用方便。它预设了抖动、闪烁、弹跳、翻转、旋转、淡入淡出等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

animate.css 基于 CSS3，只兼容支持 CSS3 animate 属性的浏览器，IE10+、Firefox、Chrome、Opera、Safari。

项目地址是：

https://github.com/animate-cs...

安装

  • 使用 npm 安装：
$ npm install animate.css --save
  • 使用 yarn 安装：
$ yarn add 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 后，将以下属性添加到中即可完成动画效果的创建。
<h1 class="animate__animated animate__bounce">An animated element</h1>
  • 自定义属性。使用自定义属性来定义动画持续时间、延迟，这使得它非常灵活，当需要更改动画持续时间的时间，只需要为全局或本地设置一个新值。
/* 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;
}
  • 同时自定义属性还可以动态更改所有时间受限的属性，可以通过 JS 脚本动态修改。
// 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');
  • 延迟效果：可以直接在元素的 class 属性上添加延迟效果：
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

// animate.css 提供了这些延迟属性：
class               默认延迟时间
animate__delay-2s   2s
animate__delay-3s   3s
animate__delay-4s   4s
animate__delay-5s   5s

// 也可以通过 --animate-delay 属性进行自定义：
/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}
  • 动画速度：可以通过添加这些 class 来控制动画的速度：
<div class="animate__animated animate__bounce animate__faster">Example</div>

// 速度的 class 包括这些：
class            默认速度
animate__slow    2s
animate__slower  3s
animate__fast    800ms
animate__faster  500ms

// 可以通过 --animate-duration 全局或本地属性自定义动画时间：

/* All animations will take twice as long to finish */
:root {
  --animate-duration: 2s;
}

/* Only this element will take half the time to finish */
.my-element {
  --animate-duration: 0.5s;
}
  • 循环效果：可以通过添加这些 class 来控制动画的循环次数：
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

// 可供选择的 class 有：
class              循环次数
animate__repeat-1  1
animate__repeat-2  2
animate__repeat-3  3
animate__infinite  无限循环

// 类似的，也可以自定义循环次数：
/* The element will repeat the animation 2x
   It's better to set this property locally and not globally or
   you might end up with a messy situation */
.my-element {
  --animate-repeat: 2;
}
  • 最后，来看看 animate.css 的一些效果：

视频请移步：https://mp.weixin.qq.com/s/X1...

开源前哨 日常分享热门、有趣和实用的开源项目。参与维护 10万+ Star 的开源技术资源库，包括：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。

使用css3实现超炫的loading（加载）动画效果

　SpinKit是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助CSS3Animation的强大功能来创建平滑，易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优... 查看详情

超实用的音乐播放器插件(jquery+css)

通过在网上搜索了大量的音乐播放器插件后,终于找到了一款上手简单,并且效果不错的插件,该音乐播放器插件是通过Jquery+Css实现的,下面就是全部代码,只要遵循下面的步骤,一定可以实现(文章末尾可查看效果图)一、目录结构二、... 查看详情

超实用的音乐播放器插件(jquery+css)

通过在网上搜索了大量的音乐播放器插件后,终于找到了一款上手简单,并且效果不错的插件,该音乐播放器插件是通过Jquery+Css实现的,下面就是全部代码,只要遵循下面的步骤,一定可以实现(文章末尾可查看效果图)一、目录结构二、... 查看详情

超慢速移动动画使用css3实现流畅效果

三角碎片以很缓慢的速度旋转移动。假设使用JS实现会出现一像素一像素移动的卡顿使用CSS3会获得很理想的效果transform:translate3d(80px,150px,0px)rotate(1220deg);transition:transform30slinear0s;上面一个属性表示图像变换translate3d(80px,150px,0px)表... 查看详情

wow.js动画使用

...WOW.js。WOW.js依赖 animate.css，所以它支持animate.css多达60多种的动画效果，能满足您的各种需求。 <script>if(!(/msie[6|7|8|9] 查看详情

使用css3实现超炫的loading（加载）动画效果

  Loading动画效果一     HTML代码：1234567<divclass="spinner">  <divclass="rect1"></div>  <divclass="rect2"></div> &nbs 查看详情

纯css实现那些超炫酷的动画效果(代码片段)

前言现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，那其实大家看到的动画其实很大一部分都是通过js或者插件实现的，但你知道吗，我们所熟知的css就可以制作炫酷的动... 查看详情

css3超实用属性：pointer-events

最近发现了一个叫pointer-events的css属性，是一个与javascript有关的属性，pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止CSS里的hover和active状态... 查看详情

aos.js超赞页面滚动元素动画jquery动画库

...库可以在页面滚动时提供28种不同的元素动画效果，以及多种easing效果。在页面往回滚动时，元素会恢复到原来的状态。简要教程aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不... 查看详情

github精选使用纯css实现动画加载效果

...》是我们分享Github中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个使用纯CSS实现动画加载效果的项目——SpinKit。SpinKit通过使用transform和opacity属性实现了包括方块翻转、圆点旋转、圆环缩放和九... 查看详情

css33d翻转动画

...生的动画animation（动画）：定义关键帧动画CSS3可以实现多种动画效果，下面说的是CSS3实现一个3D翻转的动画效果。<divclass="container"><divclass="wrapHover><divcla 查看详情

vue中的动画效果(代码片段)

Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具：在CSS过渡和动画中自动应用class可以配合使用第三方CSS动画库，如Animate.css在过渡钩子函数中使用JavaScript直接操作DOM可以配合使用第三方JavaScript... 查看详情

jquery插件aos.js

...库可以在页面滚动时提供28种不同的元素动画效果，以及多种easing效果。在页面往回滚动时，元素会恢复到原来的状态。 　使用方法：　在页面中引入aos.css文件,jquery和aos.js文件1<linkrel="stylesheet"href="dist/aos.css"/>2< 查看详情

css3常用动画+动画库

animate.css是来自dropbox的工程师DanielEden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画，包括：晃动，闪动，各种淡出淡出效果，如果你想快速的整合各种CSS3动画特效的话，使用它即可方便的实现。 查看演... 查看详情

超实用的javascript代码段item1--倒计时效果

现今团购网、电商网、门户网等，常使用时间记录重要的时刻，如时间显示、倒计时差、限时抢购等，本文分析不同倒计时效果的计算思路及方法，掌握日期对象Date，获取时间的方法,计算时差的方法，实现不同的倒时计效果。1... 查看详情

仿映客客户端tableview多种动画效果边缘返回手势等源码

...选框架zhPopupController简单快捷弹出自定义视图tableView实现多种动画效果自定义动画的PageControl展示tableView和collectionView的结构,框架CHD_ListView_StructureRxSwift+Moya+ObjectMapper优雅的网络请求级模型转换多种指示器文字效果源码SGPagingViewrea... 查看详情

丝滑顺畅:使用css3获取60fps动画

...文链接:SmoothasButter:Achieving60FPSAnimationswithCSS3在移动端使用动画元素是很容易的.如果你能遵循我们的这里的提示,在移动端适当的使用动画元素,可以变得更加容易.在这些天里,每个人都不会适当的使用CSS3动画.有些最佳的实践方法,... 查看详情

简单实用的纯css按钮效果

在许多网站中都需要实用到按钮，一个好看实用的css按钮即可以给访问者以美感，又可以方便开发者。下面就是一个纯css按钮，需要的可以参考。css代码.div{display:inline-block;padding:.3em.5em;background-image:linear-gradient(#ddd,#bbb);border:1pxso... 查看详情