Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何设置animate.css动画的持续时间?

如何设置animate.css动画的持续时间?
EN

Stack Overflow用户
提问于 2016-06-04 11:46:42
回答 2查看 525关注 0票数 0

我已经阅读了文档,但对如何实际编写代码感到困惑。animate.css文档说明:

代码语言:javascript
运行
AI代码解释
复制
#yourElement {
  -vendor-animation-duration: 3s;
}

注意:一定要用适用的供应商前缀(webkit、moz等)替换CSS中的“供应商”。

首先:这是放在style部分,还是可以使用jquery来设置和更改持续时间(最终我需要弄清楚如何做到这一点,因为持续时间是可变的);

第二:我如何知道“适用的供应商前缀”是什么?我使用的动画是来自this站点的“pulse”。

EN

回答 2

Stack Overflow用户

发布于 2016-06-04 11:59:15

您可以将其放入CSS中,也可以动态设置它。要找出您需要的供应商前缀,请在Can I Use上查找CSS动画,并查看您希望支持哪些浏览器。

但是,如果动画很复杂,则可能需要使用JavaScript动画,这将使您获得更多控制。JS动画并不比CSS动画慢,jQuery才是最慢的动画。是一个很好的、性能很好的动画JavaScript库。

票数 0
EN

Stack Overflow用户

发布于 2016-06-04 12:05:34

您可以使用这些CSS属性。

代码语言:javascript
运行
AI代码解释
复制
transition-delay:3s;
transition-duration:3s;

你需要的东西你可以使用。还必须为此添加-webkit、-moz和-ms。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37629851

复制
相关文章
Animate.css 动画库介绍
摘要总结:本文介绍了动画库Animate.css,通过实例讲解了如何在项目中使用这个库来为网页添加动画效果。具体介绍了如何下载、使用该库以及添加动画元素的过程。
乐百川
2018/01/09
1.9K0
Animate.css 动画库介绍
Animate.css动画库的安装与使用
Animate.css是一款有趣的,跨浏览器的css3动画库,可以非常简单的实现各种炫酷的动画效果,可以在项目中使用。
德顺
2019/11/13
2.1K0
33.Vue-使用第三方animate.css类库实现动画
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 包括以下工具:
Devops海洋的渔夫
2020/05/04
6.9K0
29.Vue-使用第三方animate.css类库实现动画
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 包括以下工具:
Devops海洋的渔夫
2022/01/17
4K0
29.Vue-使用第三方animate.css类库实现动画
支持animate.css动画的jquery弹出层特效
jquery.popup.js是一款支持animate.css动画效果的弹出层模态窗口插件。你可以在初始化插件时,配置模态窗口打开和关闭时的CSS3,使用非常炫酷和方便。
用户5997198
2019/10/25
6.6K0
支持animate.css动画的jquery弹出层特效
Vue同时使用transition(过渡)和animate.css(动画库)
    解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-enter-active,v-leave-active,动画时间以哪个为准可以设置tyep=animation或者transition,也可以自定义动画时长,:duration传入数字(ms)或者传入对象enter和leave分别时长,
十月梦想
2018/10/09
3.9K0
让css3动画变得有趣wowjs
animate.css 包含了一组炫酷、有趣、跨浏览器的动画,可以在你的项目中直接使用。
zhaoolee
2018/08/02
1.9K0
让css3动画变得有趣wowjs
分享:通过Animate 和wow.js 快速制作你的网页特效
Animate 通过CSS3封装的一个css插件 wow.js 可以链接到CSS动画库 两者配合起来可以快速制作你的网页特效
Alone88
2019/10/22
5.5K0
animate.css的使用
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。本文将详细介绍animate.css的使用
全栈程序员站长
2022/09/07
9160
animate.css的使用
动画插件wow.js的使用方法
Github地址: https://github.com/daneden/animate.css 体验地址:https://daneden.github.io/animate.css/ wow.js:https://www.delac.io/wow/
lyudev
2022/08/04
2.5K0
Hexo用wowjs给博客添加动画效果
本篇仅使用butterfly_v3.6.0 +的主题版本,如果是在这之前的版本,请移步下方教程链接。
花猪
2022/02/22
9920
Hexo用wowjs给博客添加动画效果
站在Animate肩膀上的项目
2.解压文件,找到dist下的wow.min.js文件用于链接到页面中使用WOW.js
程序员老鱼
2022/12/02
1.6K0
WOW.js – 让页面滚动更有趣
WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。由于使用了CSS3动画,所以一些老旧的浏览器是不支持的。为了兼容,可以增加浏览器判断。
青年码农
2021/08/18
3.7K0
Ionic3学习笔记(五)动画之使用 animate.css
animate.css 是一款强大的、跨浏览器的预设CSS3动画库,内置了很多典型的CSS3动画,兼容性好使用方便,可以应用于我们的基于Ionic3的Hybrid App,在这里你可以看到各个动画的动画效果,现在最新的版本是3.5.2,强烈建议大家使用。
Theo Tsao
2018/09/07
1K0
如何设置PDF全屏动画?PDF怎么全屏放映
如何给PDF文件设置全屏动画?顾名思义全屏动画及时文件在全屏的状态下进行页面的切换或者展示一些其他的特效,这样的文件其实能够有效的吸引读者的眼球。
用户5843321
2019/10/15
2.4K0
如何设置PDF全屏动画?PDF怎么全屏放映
PDF如何设置全屏动画?这个技巧分享给你
PDF如何设置全屏动画?很多人都用过PDF文件,但是对于PDF这个格式的文件还是有很多无奈的地方,比如:怎么在PDF文件中进行内容的编辑?怎么给它设置全屏动画?等等一系列的问题。
用户5843321
2019/10/14
1.3K0
PDF如何设置全屏动画?这个技巧分享给你
通过示例了解Vue过渡和动画
Vue过渡和动画让我们网站更具现代感并为网站访问者提供更好的用户体验的好方法。 幸运的是,对于开发人员而言,Vue动画只需几分钟即可完成设置。
前端小智@大迁世界
2022/06/15
1.9K0
通过示例了解Vue过渡和动画
Android 设置动画变化的速率
我们知道 Android 的动画有视图动画,属性动画,帧动画等等,对于视图动画我们是可以设置动画的变化速率的,有加速,减速,先加速再减速…等等各种变化速率的效果。对于视图动画,创建动画有两种方式,一种是在 xml 文件中创建,另一种是在代码中创建,因此对应的设置动画变化速率也有两种方式。
程序员飞飞
2020/02/27
2.3K0
网站页面滚动加载动画JS特效(二)
昨天发布了网站页面滚动加载动画JS特效,但是加载的页面并不怎么完美,文章页面不能直接加载出来,需要滚动条继续下来,可能是没有调节js导致的,所以今天又重新测试了wow.js,感觉这个不错,很喜欢,有兴趣的可以测试下。页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。
李洋博客
2021/06/15
7.8K0
点击加载更多

相似问题

单击react animate.css时设置动画

122

如何设置UICollectionView动画的持续时间?

90

如何使用animate.css在barba js中设置转换持续时间

11

CSS动画-设置响应动画的持续时间

10

animate.css动画距离

14
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档