怎样控制animate.css的动画时间

打开 animate.css 第一行

.animated {animation-duration: 1s;animation-fill-mode: both;
}

animation-duration 即是动画持续的时间

也可以在具体的动画元素上设定持续时间

#dowebok {animate-duration: 2s;           //动画持续时间animate-delay: 1s;              //动画延迟时间animate-iteration-count: 2;     //动画执行次数，无限次数：infinite
}

扩展阅读：animate.css 使用方法

1、引入文件

<link rel="stylesheet" href="animate.min.css">

2、HTML 及使用

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

给元素加上 class 后，刷新页面，就能看到动画效果了。
animated 类似于全局变量，它定义了动画的持续时间；bounce 是动画具体的动画效果的名称，你可以选择任意的效果。

如果动画是无限播放的，可以添加 class .infinite。

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：

$(function(){$('#dowebok').addClass('animated bounce');
});

有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：

$(function(){$('#dowebok').addClass('animated bounce');setTimeout(function(){$('#dowebok').removeClass('bounce');}, 1000);
});

怎样控制animate.css的动画时间相关推荐

animate.css 签字动画,使用animate.css完成动画
animate.css aniamte.css是一个很方便的库,内置了许多常用的动画和jquery搭配使用比较方便 $.fn.extend({ animateCss: function (anima ...
vue --- 使用animate.css实现动画
1.下载animate.css npm install --save-dev animate.css// 注意你使用的源 nrm ls(若没有改变可以忽略) 2.导入animate.css <l ...
前端之vue3使用动画库animate.css(含动画、过渡)
动画与过渡一.动画效果 1.默认动画实例动画语法 2.给transition指定name 二.过渡效果三.多个元素过渡四.vue3使用动画库动画库animate.css √ 五.总结一. ...
react使用animate.css完成动画
1.引入依赖库 cnpm i animate.css cnpm i react-addons-css-transition-group 2.导入模块 import "animate.css& ...
Vue CSS3或者npmjs网站中的animate.css实现动画效果
cartoonvue.vue(CSS3)支持一个动画 <template><div><h2>动画效果 ...
animate.css 自定义动画
在使用animate.css 的时候动画的高度超过了预期的高度在这种情况下肯定是过不了测试的,怎么办的? <div class="fold-div animated " ...
css 动画重播,javascript – Animate.CSS重播？
我有一个使用Animate.CSS的动画,如果用户愿意,我想重播,但我尝试的不起作用.这是代码: HTML: Replay JS: var $j = jQuery.noConflict(); $j(& ...
操作animate.css的一些小技巧
animate.css是一个不错的css3动态样式文件,它利用keyframes封装了很多动态样式.具体的可以到官网查看由于内容少而且方便操作,所以官网上竟然连教程都没有写:咋一看会有一种丈二和尚摸 ...
animate inater插件_基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目...
功能简介基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

怎样控制animate.css的动画时间

打开 animate.css 第一行

也可以在具体的动画元素上设定持续时间

扩展阅读：animate.css 使用方法

怎样控制animate.css的动画时间相关推荐

最新文章

热门文章