animate.css使用

最新推荐文章于 2024-05-06 19:28:55 发布
最新推荐文章于 2024-05-06 19:28:55 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： html

直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>app下载</title>
    <link href="css/animate.min.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
        .aa{width: 100px;height: 100px;background: #f00;}
    </style>
</head>
<body>
    <div class="mm animated fadeInLeft infinite" id="aa"></div>
</body>
</html>

参考地址：https://www.cnblogs.com/xiaohuochai/p/7372665.html
参数

【Attention(晃动效果)】

复制代码
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello

【bounce(弹性缓冲效果)】

复制代码
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
【fade(透明度变化效果)】

复制代码
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig

【flip(翻转效果)】

flip
flipInX
flipInY
flipOutX
flipOutY

【rotate(旋转效果)】

复制代码
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

【slide(滑动效果)】

复制代码
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

【zoom(变焦效果)】

复制代码
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

【special(特殊效果)】

hinge
rollIn
rollOut
lightSpeedIn
lightSpeedOut

qq947289507
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 使用animate.css动画库
PrimaryColor
08-03 483
vue和最新版的animate动画库不兼容，所以不能安装最新版的animate动画库。 一、引入： 在public文件夹中的index.html加入以下代码： <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> 二、使用： 在需要设置的地方添加类样式，默认类样式“animated”必须添加： 三、示例： <input type="button" valu
vue-使用animate.css实现动画
shijiaolong0的博客
02-20 829
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="css/bootstrap.min
vue 中使用 animate.css实现左滑动效果
LYR 的博客
01-28 941
<transition name="fade" enter-active-class="animate_animated animate__slideInLeft" leave-active-class="animate__animated animate__slideOutLeft" > <div v-show="show" class="alert " :class="style"...
animate.css
04-13
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详细介绍animate.css的使用
前端css中animation(动画)的使用
最新发布
小蜗牛764号的博客
05-06 2102
animation常伴随着动画帧`@keyframes`一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。 animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如`“animation:”+后面各属性的值，用空格隔开+“；”`的形式设置动画效果。举例如：`animation: box1 3s linear 2s infinite;`
关于使用animate与position：fixed冲突的问题解决
weixin_43989837的博客
09-07 1378
一，问题描述 在使用animate之后使用position：fixed；fixed定位的元素会变得能够滚动了，不再一直悬浮在固定位置 二，解决方法。 2.1：是否使用animate的元素有增大旋转等动作，如果有是否因为这些动作而改变了父级元素的宽高，如果改变了body的宽高，fixed就会重新计算，会造成影响。 2.2：使用animate的时候特别是元素旋转，需要注意不要让元素为长方形，应该尽量做成正方形，长方形旋转很容易造成body的改变。 ...
html 动画div右侧消失,使用animate.css时，动画一开始不隐藏,如何解决呢？
weixin_33848693的博客
05-30 807
animate.css 的入场动画，一开始(初始态)怎么隐藏呢？(否则会闪一下。)动画结束后要保持显示。补充。。使用了官网推荐的jquery 扩展代码，运动完后自动删除 class。这是一个坑吗？？？$.fn.extend({animateCss: function(animationName) {var animationEnd = 'webkitAnimationEnd mozAnimatio...
css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用
weixin_39607620的博客
11-22 675
在这个年代，你要是不懂一点点css3的知识，你都不好意思说你是个美工。美你妹啊，请叫我前端工程师好不好。呃。。好吧，攻城尸。。。呵呵，作为一个攻城尸，没有点高端大气上档次的东西怎么能行呢，那么css3的动画就绝对是值得你拥有了，虽说IE9以及更早版本的IE浏览器都不支持css3动画，但是IE6-8浏览器已是江河日下，使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持cs...
css--animate
codewhy的博客
09-08 4161
语法：div{animation: 动画名称 一个周期播放时间 速度曲线 延迟时间 下个周期是否逆向} @keyframes 动画名称{ from{ //do something } to{ //do something } } 下面的表格列出了 @keyframes 规则和所有动画属性：. 利用transform的动画效果： 1.translate(x,y) 2d,两点之间移动。还可以分开写translateX(x)只移动X 轴的值。tran
wow.min.js和animate.css
04-20
在实际应用中，"wow.min.js" 和 "animate.css" 结合使用，可以帮助开发者快速创建具有吸引力的网页，而无需深入了解复杂的CSS3动画细节。同时，这种技术也适用于响应式设计，因为它们支持各种屏幕尺寸和设备。但需要...
animate.css-4.1.1.zip
02-03
Animate.css是一个流行的开源库，专为网页设计师和开发者提供了一系列预先定义好的动画效果。这个"animate.css-4.1.1.zip"压缩包包含了Animate.css的4.1.1版本，这是一个更新到最新状态的库，确保了你能够获得最新的...
超棒的跨浏览器纯CSS动画实现 Animate.css使用方法
09-25
在今天的这篇文章中，我们将介绍一个超棒的CSS动画实现方式 - Animate.css。这套CSS动画是由来自Manchester， UK的设计师Dan Eden开发和设计的。使用它能够很方便的给你的页面元素添加动画效果
jQuery封装animate.css的实例
10-18
### 四、使用封装的animateCss方法 现在你可以像下面这样调用封装好的方法来触发动画： ```javascript $('#box').animateCss('bounce'); ``` 这将使得`#box`元素立即开始执行`bounce`动画，并在动画结束后自动移除...
css的animation动画
yuan0209的博客
11-25 1万+
顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一。在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果。属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由。中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向。，可以有效的构建更为随机的动画效果，让动画更加的自然。
Animate.css的使用
zh15930366635的博客
05-09 3271
引入 方法一： 从官网下载：　https://raw.github.com/daneden/animate.css/master/animate.css 方法二： 通过npm安装 npm install animate.css 方法三： 使用在线cdn https://unpkg.com/animate.css@3.5.2/animate.min.css 基础用法 安装 Animate.css 后，将类animate__animated与任何动画名称一起添加到元素（不要忘记anima
纯css动画效果--animate的应用
热门推荐
YaoQing222的博客
08-11 1万+
前言 需要某个小图标或者文字转圈的效果，部分伙伴会用js去写一个定时器，然后再去清空定时器，这样做是比较麻烦的。之前在学css里的有一个animate方法。下面就讲animate的使用： animate调用的属性值 语法：animation: name duration timing-function delay iteration-count direction; 1.animation-name 规定需要绑定到选择器的 keyframe 名称。 2.animation-duration 规定完成动
如何使用animate.css动画库
qczzc的博客
05-21 5457
随着前端界面需求以及内容友好度的提高，一个好看的动画往往显得非常重要，接下来我们就来介绍一下如何在HTML以及工程项目中使用animate.css动画库是一个前端的动画库，animate.css官网用npm安装 在js代码中引入即可(这里我推荐在main.js中引入，这样就可以在整个工程文件中使用啦) 1.2、在html文件引入 在head中 2.使用方法 在 transition 标签中给对应动作的类名加上动画库中的类就行啦。 代码如下（示例）：
【css】使用Animate.css
weixin_46590928的博客
11-19 2449
自定义预设动画类的属性。}通过js代码修改css变量 // All animations will take twice the time to accomplish document . documentElement . style . setProperty('--animate-duration' , '2s');
Animate.css使用方法
qq_51649346的博客
06-01 6826
使用npm安装 1.2导入Animate.css文件 官网搬运代码见另一个博客Animate.css大部分情况下用这种，比较方便 2.Animate.css的使用 Animate.css基本用法 ​ 之前的animate.css用法，只需要在class里加上animated +动画名称就可以使用了，但现在animate.css已经更新了官方文档，现在的使用方法如下: 从Animate.css版本4开始，可以自定义属性来定义动画的持续时间、延迟、迭代
vue animate.css 使用方法
06-28
Vue Animate.css 是一个 Vue.js 的插件，它可以让你轻松地在 Vue.js 应用程序中使用 Animate.css 动画库。使用 Vue Animate.css，你可以通过简单的指令来添加动画效果，而不需要编写任何 JavaScript 代码。下面是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值