Animcate.css 特效样式说明

最新推荐文章于 2023-05-21 03:12:26 发布
最新推荐文章于 2023-05-21 03:12:26 发布
阅读量188 收藏
点赞数
分类专栏： CSS 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33610095/article/details/109443355
版权

 

 

一：官网

官网入口

二：特效说明（共75个特效）

1、Attention Seekers 注意力寻求者（9个）

注：swiper除 jello 都有

样式简介
bounce弹跳
flash闪
pulse脉部
rubberBand橡皮筋
shake摇
swing摇摆
tada波幅
wobble摇晃
jello果冻

2、Bouncing Entrances 弹跳进入（5个）

注：swiper都有

样式简介备注
bounceIn向里，弹跳 
bounceInDown向里，向下，弹跳 
bounceInLeft向里，向左，弹跳 
bounceInRight向里，向右，弹跳 
bounceInUp向里，向上，弹跳 

3、Bouncing Exits 弹跳出口（5个）

注：swiper都有

样式简介备注
bounceOut向外，弹跳 
bounceOutDown向外，向下，弹跳 
bounceOutLeft向里，向左，弹跳 
bounceOutRight向外，向右，弹跳 
bounceOutUp向外，各上，弹跳 

4、Fading Entrances 平淡进入（9个）

注：swiper都有

样式简介备注
fadeIn向里 
fadeInDown向里，向下 
fadeInDownBig向里，向下，变大 
fadeInLeft向里，向左 
fadeInLeftBig向里，向左，变大 
fadeInRight向里，向右 
fadeInRightBig向里，向右，变大 
fadeInUp向里，向上 
fadeInUpBig向里，向上，变大 

5、Fading Exits 平淡退场（9个）

注：swiper都有

样式简介
fadeOut向外
fadeOutDown向外，向下
fadeOutDownBig向外，向下，变大
fadeOutLeft向外，向左
fadeOutLeftBig向外，向左，变大
fadeOutRight向外，向右
fadeOutRightBig向外，向右，变大
fadeOutUp向外，向上
fadeOutUpBig向外，向上，变大

6、Flippers 翻动 （5个）

注：swiper都有

样式简介
flip翻翻动转
flipInX向里，上下，翻动
flipInY向里，左右，翻动
flipOutX向外，上下，翻动
flipOutY向外，左右，翻动

7、Lightspeed 缓缓移动 （2个）

注：swiper都有

样式简介
lightSpeedIn缓缓移入
lightSpeedOut缓缓移出

8、Rotating Entrances 翻转入口 （5个）

注：swiper都有

样式简介
rotateIn向里，翻转
rotateInDownLeft向里，向下，向左，翻转
rotateInDownRight向里，向下，向右，翻转
rotateInUpLeft向里，向上，向左，翻转
rotateInUpRight向里，向上，向右，翻转

9、Rotating Exits 翻转退场 （5个）

注：swiper都有

样式简介
rotateOut向外，翻转
rotateOutDownLeft向外，向下，向右，翻转
rotateOutDownRight向外，向下，向右，翻转
rotateOutUpLeft向外，向上，向左，翻转
rotateOutUpRight向外，向上，向右，翻转

10、Sliding Entrances 滑动进入 （4个）

注：swiper都有

样式简介
slideInUp向里，向上，滑动
slideInDown向里，向下，滑动
slideInLeft向里，向左，滑动
slideInRight向里，向右，滑动

11、Sliding Exits 滑动退场 （4个）

注：swiper都有

样式简介
slideOutUp向外，向上，滑动
slideOutDown向外，向下，滑动
slideOutLeft向外，向上，滑动
slideOutRight向外，向右，滑动

12、Zoom Entrances 缩放进入 （5个）

注：swiper都有

样式简介
zoomIn向里，放大
zoomInDown向里，向下，放大
zoomInLeft向里，向左，放大
zoomInRight向外，向右，放大
zoomInUp向里，向上，放大

13、Zoom Exits 缩放退场 （5个）

注：swiper都有

样式简介
zoomOut向外，放大
zoomOutDown向外，向下，放大
zoomOutLeft向外，向左，放大
zoomOutRight向外，向右，放大
zoomOutUp向外，向上，放大

14、Specials （3个）

注：swiper都有

样式简介
hinge合页
rollIn向里滚动
rollOut向外滚动
qq_33610095
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
anime.css
闰土月下追猹
11-25 372
Attention Seekers（晃动效果） bounce flash pulse rubberBand shake swing tada wobble jello heartBeat Bouncing Entrances（弹性缓冲效果-入场） bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp Bouncing Exits（弹性缓冲效果-退场） bounceOut bounceOutDown
第三方动画库animation.css
Liberty_yes的博客
01-29 2万+
vue动画，css动画，使用第三方动画库animation.css轻松实现多种动画炫酷的效果！
animte.css的使用,快速搭建动画
业余前端的职业经历
04-06 534
动画特效是网页中很重要的组成部分,一个绚丽的网页效果能吸引很多游客观看,游客最后也会成为你网站的常住客人。 css3中的动画效果使用frames进行书写 关于css3中的简单动画的实现我之前有讲过 https://blog.csdn.net/yunchong_zhao/article/details/104268251 当然在实际的项目中特别是工作中需要完成一些有难度的动画效...
css之animition动画帧
weixin_30471065的博客
01-02 225
一.代码示例及使用方法 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动画帧animation</title> 6 <style type="text/cs...
转: css3动画简介以及动画库animate.css的使用
dayanwu2842的博客
06-20 274
~~~ transition animation 和 animate.css 在这个年代，你要是不懂一点点css3的知识，你都不好意思说你是个美工。美你妹啊，请叫我前端工程师好不好。呃。。好吧，攻城尸。。。呵呵，作为一个攻城尸，没有点高端大气上档次的东西怎么能行呢，那么css3的动画就绝对是值得你拥有了，虽说IE9以及更早版本的IE浏览器都不支持css3动画，但是IE6-8浏览器已是...
CSS3动画animation认识和Animate.css的使用
极客神殿
09-05 2264
CSS动画可以取代js动画 在移动端会更加流畅！ 下面是一个的绘制太阳系各大行星运行轨迹笔记，可以自学参考！ 首先我们需要创建一个@keyframes规则 @keyframes name{ from{width:1px} to{width:100px} } //或者使用百分比 @keyframes name{ 0%{width:1px} 100{width:100...
Animate.css介绍及使用教程
Andrelia的博客
07-13 1万+
前面的话 animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详细介绍animate.css的使用 引入 　　animate.css的最新版本是3.5.2，引入animate.css很容易，有以下几种方法 1、从官网下载 https://raw.github.com/daneden/animate.css/mas...
深入理解CSS动画animation
04-21 623
　transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的；而animation则是通过关键帧@keyframes来实现更为复杂的动画效果。本文将介绍关于animation动画的相关知识 定义 　　和transition类似，animation也是一个复合属性，包括animation-name、animation-duration、animation-t...
如何使用animate.css动画库
qczzc的博客
05-21 5412
随着前端界面需求以及内容友好度的提高，一个好看的动画往往显得非常重要，接下来我们就来介绍一下如何在HTML以及工程项目中使用animate.css动画库是一个前端的动画库，animate.css官网用npm安装 在js代码中引入即可(这里我推荐在main.js中引入，这样就可以在整个工程文件中使用啦) 1.2、在html文件引入 在head中 2.使用方法 在 transition 标签中给对应动作的类名加上动画库中的类就行啦。 代码如下（示例）：
animate.css的使用
m0_61685599的博客
10-24 4398
animate.css是一个CSS3动画库，它的里面预设了许多的常用动画。因为它把不同动画效果绑定到的是不同的类里面，所以我们想要使用的话，只需要先引用animate.css文件，再把你想要使用的那个类添加到元素上面就可以了。 第一步：引入animate.css文件： （可使用：http://www.bootcdn.cn/animate.css/的服务） <head> <link rel="stylesheet" href="animate.min.css"> &l
CSS中animation动画-详解
热门推荐
qq_48109675的博客
08-30 4万+
1、animation-name ：xx （设置关键帧的名称为xx） 2、animation-duration：5s （动画持续时间为5s） 3、animation-timing-function： linear （动画时间曲线 也叫做运行速度为匀速） 取值： linear 匀速、 ​ ease （默认）低速开始—>加速—>结束前减速 、 ease-in 以低速开始、ease-out 以低速结束、ease-in-out 以低速开始和结束。 cubic-bezier(n,n,n,n)
animate.css的使用——老板再也不用担心我没有特效了！
weixin_42855542的博客
12-13 2359
animate.css—— 一款强大的预设css3动画库！ 你还在使用hover？还在自己写动画帧? 一个人的脑洞总是有限，让我们一起来看看一仓库的创意，从中启发属于你的动画效果！！！ animate.css体验（附带下载）：https://daneden.github.io/animate.css/ 或这git下载：https://github.com/daneden/animate.css 使...
Animate.css 教程
weixin_34006965的博客
07-12 1325
animate.css 是一个有趣，酷炫的，跨浏览器的动画库，你可以将它用于你的项目中。不管是主页，滑动切换，又或者是其它方面，你都可以通过它来制作出惊人的效果。 基本用法 引入CSS文件 这个对你来说应该再容易不过了，我相信你可能也已经对引入外部的CSS样式文件的代码以及快捷键也都背得滚瓜烂熟了。 你只需要在HTML文件的head标签中引入CSS样式文件，如下： &lt;...
16_Vue3动画(一)之动画的基本使用及animate.css库的使用
酒客的博客
02-12 2362
Vue3动画的基本使用及animate.css库的使用 认识动画 在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验： React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group； Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果； 我们来看一个案例： Hello World的显示和隐藏； 通过下面的代码实现，是不会有任何动
常用第三方工具库
狡辉两门的博客
05-11 1693
第三方库概览 名称 文档 一句话介绍 jQuery 官网：https://jquery.com/中文网：https://jquery.cuishifeng.cn/ 让操作DOM变得更容易 Lodash 官网：https://lodash.com/docs中文网：https://www.lodashjs.com/ 你能想到的工具函数它都帮你写了 Animate.css 官网：https://animate.style/ 常见的CSS动画效果都帮你写好了 Axios 官网：https
animation.css的使用
王小森的成长博客
08-16 3251
animation.css是一款非常简单、好用的css类库，使用该库，只需要两步即可
animate.css动画样式详解
weixin_38797742的博客
01-22 468
一、使用步骤 从左边进入 #### 二、属性 1、Attention Seekers bounce flash pulse rubber Band shake swing tada wobble 2、Bouncing Entrances bounceInLeft bounceOutLeft bounceInRight bounceOutRight bounceInDown bounceOutDown bounceInUp bounceOutUp 3、Bouncing Exits bounceOut bo
animate.css
weixin_30247781的博客
08-15 57
这是个css3动画框架，现在很流行，在小动画效果有很多，使用的方式 <div class="animated bounce"></div> /*只要修改bounce这个类就可以*/ 一、atention Seekers 1、bounce 2、flash 3、pulse 4、rubberBand 5、shake 6、sw...
基于CSS3实现淡入（fadeIn）淡出（fadeOut）效果
weixin_33866037的博客
08-08 7769
网上的淡入淡出效果大多是依照jquery中fadeIn和fadeOut的方法使用js来控制元素的透明度达到目的，但缺点是有轻微的卡顿感，并且运行效率一般。 这里提供另外一个思路，即通过预先定义好的css样式控制图片透明度的过渡， 这种方法过渡平滑，过渡的效果基于css3的animation，所以效率高些。 思路是将淡入，淡出的效果做成预先...
bootstrap.css 和 layui.css 同时引入导致样式混乱，如何优先使用bootstrap.css的样式
最新发布
07-08
要优先使用`bootstrap.css`的样式，可以尝试以下方法： 1. 调整样式文件的引入顺序：在HTML文件中，确保`bootstrap.css`的引入在`layui.css`之前。这样，浏览器会首先加载`bootstrap.css`的样式，然后再加载`layui.css`的样式。由于后面加载的样式会覆盖前面加载的样式，所以`bootstrap.css`的样式会优先生效。 ```html <link rel="stylesheet" href="path/to/bootstrap.css"> <link rel="stylesheet" href="path/to/layui.css"> ``` 2. 使用!important修饰符：如果调整样式文件的引入顺序无效，可以在需要优先使用`bootstrap.css`样式的地方，为对应的样式类添加`!important`修饰符。这样可以强制覆盖其他样式，并确保`bootstrap.css`的样式优先生效。例如： ```html <div class="my-class">Sample Text</div> ``` ```css .my-class { color: red !important; /* 使用!important修饰符 */ } ``` 请注意，使用`!important`修饰符可能会导致样式的全局性变化，因此请谨慎使用，并确保只在必要的地方添加。 无论采用哪种方法，都建议在修改样式时仔细检查文档和样式表，了解每个框架的样式类和属性，以确保所做的更改不会破坏页面的其他部分或导致其他问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值