当我遇到一个奇怪的问题时，我一直在尝试在覆盖div中淡出CSS3过渡。
基本上，我有一个div元素，在它的id上设置了样式-即背景颜色：#000，不透明度: 0，等等，以及浏览器特定的转换样式。默认情况下，overlay元素有一个"hiddenElement“类，将它的display设置为none。
当要显示覆盖图时，hiddenElement类被移除，另一个类被“初始化”，这个类将元素不透明度设置为0.6。
我所期望的是元素能够平滑地动画，这在Opera中确实发生了，但在firefox和chrome中却不是这样工作的。
我在这里构建了一个孤立的案例：。
正如你所看到的，当“addCl
浏览 5提问于2011-07-15得票数 2
回答已采纳
我正在寻找一个为translate3d(x，y，z)提供css3动画支持的框架，我已经研究了最好的框架，即jquery.transit.js和move.js，但这不能解决我的目的。
浏览 2提问于2013-01-08得票数 0
回答已采纳
在声明CSS动画时，元素将触发animationStart和animationStartEnd事件。
是否有一种方法在以下情况下触发javascript函数：
所有动画都完成了，包括儿童的动画。
没有动画声明，也没有必要等待。
下面是我当前的方法：
var
/**
* Fires a custom event when all animations are complete
* @param {object} $element - jQuery object that should trigger event
*
*/
triggerAllAnimatio
浏览 4提问于2014-08-06得票数 6
回答已采纳
与HTML5中常用的inifnite循环相比，C++ javascript动画是如何工作的？在动画Javascript程序中，它似乎不是一个主要的无限循环。浏览器是否有定期调用的回调函数？
我说的是javascript交互式动画，就像浏览器游戏一样。
浏览 4提问于2015-01-17得票数 1
回答已采纳
1回答
我必须用JavaScript编写一个简单的HTML横幅旋转器，并使用CSS3进行动画转换。我带着这个来的
HTML：
CSS：
#横幅{动画-名称: myfirst；动画-持续时间: 5s；动画-定时-功能:线性；动画-迭代-计数:无穷；动画-方向:交替；动画-播放-状态:运行；} @keyframes myfirst { 0% {不透明度: 0;} 10% {不透明度: 1;} 90% {不透明: 1;} 100% {不透明: 0;}
JavaScript：
var i= 0；var横幅=新数组(“img/banner1.jpg”，"img/banner2.jpg"
浏览 6提问于2013-12-19得票数 1
我有个问题。我正在使用Bounce.js创建漂亮的菜单动画(具有一些很酷的效果)。使用css关键帧动画的Bounce.js，重新启动可能会有问题。我得到了菜单，当我点击一个按钮时，当添加.show类时，它应该会触发显示动画。但当我再次按下该按钮时，隐藏类应该与隐藏动画一起添加(这只是前一个动画的反向版本)。
Js正在工作(类的添加和删除都是正确的)，但是动画只触发一次-并且没有隐藏动画(菜单元素只是消失而不是动画本身)。
浏览 8提问于2016-06-27得票数 0
2回答
我几乎总是在我从事的任何网络项目中使用JQuery动画，但我想知道CSS动画有何不同。我知道语法是不同的(很明显)，但是CSS动画有哪些特性是JQuery没有的，反之亦然。每种方法的优缺点是什么？有更好的功能吗？每个人的效率有多高？
浏览 2提问于2014-11-23得票数 9
回答已采纳
我使用了-webkit- stuff，但由于某种原因，它没有动画效果，即使相同的代码以-moz-前缀在firefox中也可以工作。
背景应该向下滑动，然后背景会改变&新的动画应该开始播放。新的动画是相同的，背景滑入，然后滑出盒子，然后新的动画再次进入。
浏览 0提问于2012-05-17得票数 1
回答已采纳
3回答
我正在尝试使用jQuery复制/模拟使用CSS3动画制作的动画/效果。
我计划在CSS3动画不支持的情况下，使用jQuery版本作为后备。
这是一个CSS3动画的运行示例：
解释它的最好方法是奇数点击的翻转和偶数点击的翻转。
我所说的点击是指触发器上的点击，#trigger和奇数点击是点击1，3，5等，而偶数点击是第二，第四，第六等点击。
现在，我已经将CSS动画应用于类，并在单击触发器时切换类，所以如果可以将翻转动画应用于一个类，将翻转动画应用于另一个类，这将在我设置的环境中完美地工作。
我非常感谢所有人和任何人在这方面的帮助，我只是想不出如何制作如此复杂的动画-嗯，它不一定复杂，我不想吓跑
浏览 3提问于2013-03-09得票数 0
回答已采纳
3回答
CSS3动画，平移到位置
、、、
我有一个div，我点击它来拖动它。一旦它在一个区域上，它就会通过以下方式动画到它的位置：
$("#wheel1").animate({left: "200px", top: "100px"});
我还可以使用以下命令将其设置为动画：
@-webkit-keyframes wheel1 {
0% {
}
100% {
-webkit-transform: translate(200px, 100px);
}
}
不同之处在于；使用jQuery时，它从文档左侧开始动画到200px。有了CSS3，它会从你
浏览 2提问于2012-06-14得票数 8
回答已采纳
1回答
我正在实现一个应用程序演示，在一个提示(它回调到服务器的地方)之后在屏幕顶部显示一个HTML5横幅。但是，我不知道如何让HTML5横幅从顶部垂直过渡到屏幕上。
我在这里讨论的过渡动画类型是 -尽管我需要的动画是一个简单的垂直过渡，没有本机iOS推送通知所具有的3D效果。
谢谢你的帮助！
浏览 1提问于2013-01-07得票数 0
回答已采纳
执行性能更好的是CSS3动画还是jQuery动画？
它们如何影响用户浏览器的性能或执行速度？
我关心的不是浏览器的兼容性，而是执行性能。
浏览 0提问于2012-04-04得票数 4
回答已采纳
1回答
我到处寻找一个和这个动画一模一样的动画：
问题是它是css制造的，虽然大多数浏览器还不支持它，但它并不是一个真正的选择。
<-太小太简单了。
<-他们有一些水平条，但动画速度是线性的。
<-这是一个列表。上面提到的两个加上一些额外的。
有更多的网站在那里，但我失去了一些链接。但它们的共同点是它们都太小了，看起来不像上面的。
我想我已经在“现代UI/Metro UI”中看到过这个动画，或者在Windows8中叫它什么。
希望有一些人有更好的搜索或图形技能，可以找到一个很好的简单加载动画圆在不同的速度。
浏览 1提问于2012-10-03得票数 2
您好，有没有可以将fadeOut等标准动画转换为CSS3动画的jquery扩展？CSS3要快得多，但没有得到广泛的支持。我只找到了一些具有这些功能的插件，但不幸的是，它们只适用于$.animate函数。
谢谢
浏览 1提问于2011-09-01得票数 0
回答已采纳
4回答
我不熟悉CSS3动画，但我确实想在我的网页元素中添加一些CSS3动画，你能告诉我一些快速制作css3动画的方法吗？例如，我们有没有一些jquery插件来做css3动画？谢谢!
浏览 0提问于2012-08-12得票数 1
回答已采纳
4回答
这个问题以前也被问过，但与性能有关。SO回答了忽略在IE上实现的问题。
我承认CSS3过渡比jQuery动画更快。
然而，我注意到CSS3在IE6-8上遇到了问题，因此需要使用像ie9.js或选择器这样的插件。这两个网站在SO和其他地方都有不同的记录。
因此，我想在这里澄清一下。据我所知，jQuery动画将在不同的浏览器及其版本之间实现正常化。
因此，即使回头看看ie-8也是最好的建议，不管速度如何，都要使用jQuery？
浏览 3提问于2012-11-06得票数 1
回答已采纳
3回答
是否可以以动画形式转换为CSS :hover规则？我的意思不是动画到我在脚本中指定的东西，而是在CSS中指定的东西。
浏览 1提问于2012-09-05得票数 0
回答已采纳
我想知道使用setTimeOut或setInterval在javaScript中制作动画的正确方法(我指动画的循环部分，在特定时间后循环)？
如果这是正确的，也是唯一的方法，绿色袜子(Gsap)和其他JS动画库使用setTimeOut和setInterval在特定的时间做动画吗？那么animate方法在jQuery中呢？
更新
我使用来制作动画，它提供了非常快速和流畅的动画。我只是问这个问题，想弄清楚他们是如何处理动画非常流畅和快速的？
正如我在问题中提到的，有一些像setTimeOut和setInterval这样的函数用于处理动画，还有另一个函数名是requestAnimationFrame
浏览 0提问于2017-02-19得票数 1
回答已采纳
2回答
我只是在制作一个带有fixed背景定位的元素的网页，在我将css动画应用到一个(完全不同和不相关的)元素之前，它工作得很好。
我试着删除/重新应用动画，以确保它确实是问题所在，而且，当我添加动画时，背景定位(页面上的每个元素)都是静态的，并且在删除动画时再次工作。
这是正常的吗？
最终，我在寻找一种解决方案，允许：
相对定位，
浮动元素(或类似包装器的最小子元素)
用于固定的背景位置
在使用CSS3动画的网页中，
与Chrome兼容。
下面是动画：
这里没有他们：
我只在Chrome上测试过这个。
UPDATE：如一个答案所示，给出具有固定背景位置的元素
浏览 8提问于2014-04-05得票数 4
回答已采纳
我有一个非常简单的情况:在页面上淡入/淡出元素(简单的div，等等)。我知道这可以通过CSS过渡或CSS动画的不透明度来实现。
这两者之间有什么性能差异吗？我一直使用CSS过渡(主要是因为它们需要更少的CSS行，等等)，但我想知道使用CSS动画是否有什么好处。
浏览 2提问于2013-06-28得票数 16
4回答
每次我访问一个有CSS3动画的页面时，我的笔记本就会变得嘈杂(给我一个信号，表明它在那里做了一些繁重的工作)。我不关心我自己是否至少得到了足够平滑的动画效果。但事实并非如此。我在配备8 8GB内存和专用GeForce 320M的2.4 GHz酷睿2 Duo上得到的结果(不多，但对于一些css来说应该足够了，不是吗？)是一些肉干，随机闪烁，在某些情况下有奇怪的人工制品...“动画”，这通常比JS更糟糕……
有人做过JS和CSS动画的比较吗？或者针对实际使用对建议的CSS3好东西进行基准测试(例如，它们中有多少可以同时出现在页面上，而不会出现严重的挂起，等等)？有没有什么最佳实践(比如-做这个，不
浏览 4提问于2011-10-23得票数 13
回答已采纳
4回答
你能推荐一个Jquery插件来做和这个演示一样的文本动画吗：
这是用Flash制作的文本动画(点击这里：)，但我希望在纯Javascript，CSS和HTML中也能有同样的效果。
谢谢你的建议，利奥
浏览 2提问于2012-06-25得票数 1
我需要用动画将一个元素从一个偏移位置移动到另一个偏移位置。我使用的是
function getOffset(el) {
el = el[0].getBoundingClientRect();
return {
left: el.left + window.scrollX,
top: el.top + window.scrollY
}
}
var _anchorElemPos = getOffset($element)
_animationElement.animate(_targetAnimPos); /*_targetAnimPos i
浏览 0提问于2017-01-10得票数 0
2回答
我有一个jQuery移动页面，我想动画这个上的保存按钮，使它失去一半的宽度/高度，然后动画回到它原来的大小。
function animateMe() {
var originalHeight = $("#btnSave").height();
var originalWidth = $("#btnSave").width();
$("#btnSave").animate(
{"height": originalHeight / 2, "width": originalWidth / 2
浏览 0提问于2013-09-24得票数 3
回答已采纳
1回答
这些日子里有各种各样的动画元素。HTML5画布动画、CSS3动画和转换、常规的CSS动画，甚至创建新的对象。你如何在所有这些中作出选择？有更快的吗？
浏览 4提问于2013-12-14得票数 1
回答已采纳
2回答
我是一个带有jquerys mouseover/mouseout事件的dom对象。这很好，除非在运行之前的动画时鼠标被输入/退出。然后，它跳到下一个看上去丑陋的动画的开头。
如何才能避免这种情况？
$("#leftlogo").on("mouseover", function(t) {
$(t.target).css("animation-name", "left-over");
}).on("mouseout", function(t) {
$(t.target).css("animati
浏览 0提问于2014-04-11得票数 1
回答已采纳
我如何制作一个简单的javascript动画，将div (#MyDiv)从300px滚动到- 300px超过15秒，暂停15秒，然后重放，然后继续无限循环？
我尝试了css使用多种方法，但它只是不够流畅，以满足我的需要。
浏览 0提问于2014-08-10得票数 0
1回答
我正在做一个没有BoilerPlate的项目，该项目现在使用了很多jQuery动画，比如几个元素的并行动画，以及背景中的20个小型.png云彩图像的移动(以使云的时间间隔)，这些图像在移动设备上运行非常缓慢和落后。我希望桌面和移动环境都能使用相同的UX。我使用mediaQueries来为更小的屏幕使用更小的图像/元素，但这似乎并没有像我想象的那样优化移动性能。我很熟悉HTML5 5-样板和BP-移动，但不确定两者是否会帮助我的问题。
如何使这些特殊效果在移动平台上顺利运行？
浏览 0提问于2012-12-31得票数 1
回答已采纳
这是一个装腔作势的人：
加载页面时，第一次将鼠标悬停在邮件和LinkedIn选项卡上时，动画会跳转到端点框架。它应该是标签放置的动画。
在第一次悬停之后，一切正常，悬停行为与预期一样。尝试了鼠标输入、鼠标悬停和鼠标悬停。就我个人而言，我最喜欢鼠标输入，但那就是我。其行为类似于下面的水平主题按钮，它们不会显示跳转。真奇怪。
代码如下所示：
$("#zipperTabLinkedin a")
.mouseenter(function(e){
$(this).animate(
{padding:'30px 0 0 0'}
浏览 0提问于2012-09-28得票数 0
1回答
我有一段代码，它使用标准的jQuery驱动动画来平滑地从页面的一个部分滚动到另一个部分(以避免页面锚中的页面跳转)。下面是：
// Scroll to
$('.scrollto').click(function() {
var elementClicked = $(this).attr("href");
var destination = $(elementClicked).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTo
浏览 2提问于2015-04-14得票数 0
回答已采纳
1回答
根据角1.2 ngView文档“输入和离开动画同时发生”，因此ngView更新过程的时间间隔类似于
添加新内容>输入/离开新内容>删除旧内容
是否有一种方法可以按顺序进行，而不是同时进行--首先删除旧的，然后再添加新的？
动画离开一个>删除旧内容>添加新内容>动画输入一个
我在这里的观点是，我添加(输入)内容的Ctrl正在触发另一个事件/动画，而ngView的先前内容正在干扰它们。或者有什么方法可以在动画输入/发布完成后(从控制器的范围内)触发事件？
浏览 4提问于2014-01-14得票数 2
4回答
我指的是1.8+版本。
由于css转换是硬件加速的，我想知道在后台jQuery的动画功能是否依赖于css3转换(对于现代浏览器)。
我在动画文档上没有看到任何关于这方面的内容
浏览 0提问于2012-11-09得票数 5
回答已采纳
3回答
我最近刚刚开始使用jQTouch为iPhone开发一个站点，并编写了以下代码：
<li class="title" onclick="showDesc('desc1');">Post Title</li>
<li id="desc1" class="shortDesc">
Short description of post content
<a href="#viewPost">Read</a>
<
浏览 3提问于2011-10-26得票数 3
回答已采纳
2回答
请注意，当您加载时，左侧的窗体如何在中显示动画。你是如何制作这样的css3动画的？是否需要javascript来添加一些类卸载？
谢谢
浏览 2提问于2012-04-20得票数 0
好的，这是一个动画演示(点击标题中的“潮人”)：
这相当简单。从100%维度更改为75%维度，并从0不透明度变为1不透明度。当你按下X键时，它就会反转过来。我的性能问题是由jQuery用来动画的javascript setInterval引起的。我尝试了一些调整，看起来我将不得不使用CSS3，这是我不热衷的更混乱的代码。
那么，如何转换此jQuery动画：
.animate({
opacity: 0,
width: '100%',
height: '100%',
left: '-50%
浏览 0提问于2012-02-19得票数 0
回答已采纳
1回答
当用户关闭浏览器窗口或尝试刷新时，浏览器默认对话框后面会弹出一个模式。但是，如果我尝试将动画应用于模态，如fadeIn或幻灯片，则动画和模式只在确认默认对话框后才会出现。
我用的是自带模式。这是我的密码：
HTML：
<div class="modal" id="holidays-leave-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!--conten
浏览 2提问于2015-02-04得票数 2
回答已采纳
3回答
我一直想知道哪个动画在性能上更好-- Javascript还是CSS3。在此页面上，您可以对GSAP、jQuery和CSS3进行比较：
向下滚动到性能比较。现在我的问题是：
CSS3迟早会比Javascript更快吗？那么我们应该用CSS3还是仍然用Javascript来编写动画呢？
更新:另一个网站：
目前看来，GSAP在大多数方面都比CSS3快，但在3D转换中，CSS3更快。
现在的问题仍然是: CSS3会比GSAP(或其他类似的框架)更快吗？
浏览 2提问于2014-09-24得票数 7
这一次非常具体，我有下面的代码来根据条件循环一些淡入淡出，正如你可以看到的，根据动画的状态略有不同。
目前，它正在产生我想要的效果，但它似乎逐渐减慢，直到大约3分钟时，它完全停止。
我已经到了不能再盯着它看的地步！有没有人能给我一些关于如何使这个连续循环的建议？
这里有一个小把戏：
var glimmerLen = 16;
var initiated = false;
var animateLoop = false;
var timeout;
function glimmerAnimate() {
if (!initiated) {
timeout = window.setTime
浏览 0提问于2013-03-06得票数 0
回答已采纳
1回答
在我开始之前，我想声明我不打算使用这个动画做任何事情。我只是觉得它很酷，想看看它是如何工作的。
去过apple.com吗？大多数人都有，有些人在他们的手机上。如果你看过，你应该已经看过这个移动网站了--它使用了一个带有一些很酷动画的向下滑动的导航栏。但如何才能重现这一切呢？导航栏本身可以很容易地用倒置的方框阴影重新创建，但是如何将这两个图像(如果可能的话，在本例中是div)转换为动画，如显示的
浏览 1提问于2014-11-11得票数 1
7回答
我有一个页面，它在Javascript中进行一些密集和持久的计算。我想有一个加载动画，告诉用户正在取得进展。我现在有一个动画gif，但在Javascript运行时，整个浏览器窗口冻结( gif不播放)。然后，当它完成时，它会解冻。计算必须是客户端的，所以它们不能在服务器上完成。
有没有办法防止Javascript在计算时冻结页面和停止播放动画？
浏览 2提问于2011-09-05得票数 17
回答已采纳
5回答
在迁移到HTML5的过程中，是必须放弃jQuery，还是正在进行将jQuery迁移到HTML5的端口？
例如，jQuery有像SlideDown，SlideUp等动画。不使用HTML5制作动画的吗？难道HTML5不会更好地处理这件事吗？
浏览 1提问于2010-06-08得票数 2
回答已采纳
2回答
Webkit动画
、、
非常新的CSS webkit动画，并非常热衷于学习它！也有很多无知！所以这几个问题：
CSS网站的最佳演练/教程/官方网站是什么？
我需要安装webkit才能在我的CSS文件中编程吗？
谢谢和问候！
帕里贾特
浏览 2提问于2011-07-20得票数 0
回答已采纳
1回答
我有一个小问题，我的客户不会接受。
safari上iPad上的顶部滑块动画仅在2张幻灯片上运行。这是我使用CSS3动画和jQuery类更改创建的自定义滑块动画。它在chrome iPad和所有其他浏览器上都运行得很好，但在移动设备上的safari上就不行了。
以下是该网站：
提前谢谢你。
浏览 3提问于2015-09-08得票数 1
我们公司内部网上运行的一个应用程序用来使用jquery不透明动画来显示一组闪烁的指示符。由于我们的许多系统都是老而慢的，所以我用动画gif更新了它，这极大地提高了浏览器的响应性和页面滚动能力。
然后，我发现大多数通过终端服务器访问站点的用户通过组策略禁用了internet动画。因此，他们看不到动画的gif。这是无望的要求管理员启用这一点，他们只是列举了性能问题等。有什么html代码，我可以用欺骗IE让这个图像动画？如果不是，如果我不能使用gif，那么显示动画的最佳(处理器/内存最少的)方法是什么？
浏览 1提问于2014-07-04得票数 0
回答已采纳
2回答
GSAP性能与结构
、、、、
GSAP声称使用html5来执行出色的网页使用动画，但在他们关于的文章中明确表示，它不使用HTML5中的画布框架工作。很明显，他们使用的是从提供的的Javascript，但这是非常混乱的解释。在没有画布的情况下，他们会以其他方式使用html5动画吗？如果他们使用纯HTML5，这是否意味着HTML5动画比CSS、jQuery和Javascript快得多？
浏览 9提问于2014-06-23得票数 4
回答已采纳
1回答
您可以将ng-animate与ng-class一起用于添加和删除动画。我正在寻找在CSS3中制作一个动画，但还没有找到很好的例子与ng-class在线。所以我想知道人们是否有好的例子想要分享。
我不确定我的最终动画会是什么样子，但为了这个例子的目的，假设我只想在添加类myclass时使div的高度逐渐增加。
<div ng-class="{{myclass:scopeVar}}" ng-animate="?????"></div>
**CSS**
.myclass.ng-add{??}
.myclass.ng-add-active{
浏览 0提问于2014-01-21得票数 22
回答已采纳
也许有人使用库来制作动画？我使用它，但它似乎在移动设备上不起作用。例如，在iphoen 5s safari上，它工作得很好，但在iPhone4s和at androids上-却不能工作……
也许有一些方法可以解决这个问题？我看了看源代码，发现似乎有，所有移动devices...but所需的css属性仍然不能让它工作。
浏览 2提问于2014-07-24得票数 0
2回答
我需要一个弹出动画鼠标悬停，就像这样，当你移动鼠标在驱动器上流量/赚钱内容/增加参与：
就像类. CSS 3-条目上的CSS动画。我不确定它是否也使用jQuery。
有谁能举个简单的例子吗？
非常感谢!
浏览 3提问于2016-01-04得票数 0
回答已采纳
基本上，我要做的是设置一个元素，我将应用大约5个不同的css3动画。我想做的是让WebkitAnimationEnd事件触发五个动画中的每一个。
因此，当第一个动画结束时，它会触发WebkitAnimationEnd事件并激活第二个动画，等等。
浏览 7提问于2012-09-20得票数 1
1回答
我对比赛的时机有异议。当第一次单击“开始”按钮或用户在再次单击该按钮之前等待足够长的时间时，所有操作都正常。
否则，只有音频触发，但旋转过渡不。旋转转换使用transit.js创建。
我试过在tock循环的末尾和重置按钮上使用clearQueue，但没有任何效果。
我试图实现：-所有动画队列清除时，启动或重置按钮被点击。
浏览 3提问于2013-07-30得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
