Tag: css animations

使用javascript在css3中获取@keyframe当前值

请参阅此处的演示： http ： //jsfiddle.net/hamidrezabstn/fgcPa/5/ 当我点击中间的雨滴时，我希望它旋转到旋转圆圈的当前位置！ 我尝试下面的JS代码，但它不起作用！ 接下来我要做的是用旋转圆圈旋转雨滴！ $(function() { $(‘#center’).click(function() { var pos = $(‘#circle’).css(‘transform’) $(this).css(‘transform’, ‘pos’) }); });

为什么缓慢的jQuery动画起伏不定？

我在谷歌搜索这个问题时遇到了困难，因为我能找到的大部分内容都是关于动画本来应该很快但行动缓慢的动画。 我的问题是关于一个我希望持续时间长但仍然流畅的动画。 我已经创建了这个jsfiddle来演示这个问题： http ： //jsfiddle.net/93Bqx/ 我试图让一个元素随着时间的推移慢慢移动到另一个位置。 但动画非常不稳定。 基本上，它归结为这样的事情： $elem.animate({ left: x, top: y }, someLargeNumber); 我想知道问题是动画是否太慢以至于每一步都小于一个像素，所以它将它们四舍五入为0或1使它看起来像是丢帧然后一次移动。 但我不知道如何检查或解决这个问题。 有没有更好的方法来做慢动画，所以他们是顺利的？ 我有一个类似的用CSS3创建并且翻译（x，y）很顺利但不幸的是我需要比我认为可以用CSS获得更多的灵活性。

如何停止CSS3过渡

我想停止正在进行的转换。 我发现一些散布在互联网上的参考文献[1] [2]，但我似乎无法把它拼凑在一起。 这是第一个建议的小提琴（用jQuery和CSS Transit作为上下文）： http ： //jsfiddle.net/thomseddon/gLjuH/ 谢谢 [1] https://twitter.com/evilhackerdude/status/20466821462 [2] github.com/madrobby/zepto/issues/508

Css和Jquery动画

我想要实现的是这个动画 链接到动画是Material Design 我缺少什么？如何在不使用position:absolute情况下实现上述结果 到目前为止我做了什么 HTML： Unicity Activate Lean Complete Bios Life D CSS #product_list { right: 0; left: 0; text-align: center; } .product-list .item { display: inline-block; position: relative; border-radius: 3px; margin: 4px; overflow: hidden; text-align: start; background-color: #fff; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16); -webkit-transition: border-radius 500ms cubic-bezier(0.4, 0, 0.2, […]

在flexbox中过渡flex-grow的项目

是否可以在flexbox中转换项目？ 单击时，我希望所有项目都折叠，但单击的项目除外。 单击的那个应该使用容器中的所有可用空间。 // only works once! $(“.item”).click(function() { $(“.item”).not(this).each(function() { $(this).addClass(“collapse”); }); }); html, body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; } .container { flex-grow: 1; flex-shrink: 0; flex-basis: auto; display: flex; flex-direction: column; height: 100%; } .item { flex-grow: 1; flex-shrink: 1; flex-basis: auto; transition: all […]

交错的CSS动画

我有一个CSS动画，我希望以200ms的间隔应用。 我已经设置了这样的CSS： .discrete { position:relative; opacity:1; -webkit-transition: all .5s linear; -moz-transition: all .5s linear; -o-transition: all .5s linear; transition: all .5s linear; } .discrete.out { left:-40px; opacity:0; } 然后我想以200ms的间隔错开.discrete.out类的应用程序。 我尝试过以下方法： $(‘.discrete’).each(function() { $(this).delay(200).addClass(‘out’); }); 还有这个： $(‘.discrete’).each(function() { var theNode = $(this); setTimeout(function() { theNode.addClass(‘out’); }, 200); }); 但在这两种情况下，动画都会立即发生！ 有任何想法吗？

用html的两面翻转div

我在我正在建立的网站上有一个登录表单，而且我还有一个注册表单。 当点击“注册”链接时，我想通过将div旋转到另一侧来添加一些奇特的动画。 我希望登录表单位于正面，注册表单位于背面。 我宁愿不使用javascript，但如果有必要，我会。 谢谢你的任何答案！

CSS3动画translate3d不起作用

我一直在尝试使用jQuery animate和CSS3 animate，我也想测试2D / 3D翻译以查看哪个更好。 有谁知道为什么我的CSS3 translate3d不起作用？ 我在桌面和移动设备上试过它。 任何帮助赞赏 的jsfiddle HTML transition translate translate3d jQ animate CSS .container {position:absolute; left:20px; width:80px; height:80px; padding:5px;} /* transition */ #container1 {top:20px; background:red; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear;} #container1.on {left:250px} /* It moves if from pos absolute of parent, […]

环形工艺旋转器，环周围有褪色梯度效应

我想用CSS3或JavaScript创建一个环形的流程微调器，类似于Android中的加载进度微调器。 旋转器应连续旋转并填充沿边缘渐变的纯色（即圆锥形渐变），如下图所示： 我怎样才能做到这一点？

测试是否为CSS动画启用了硬件加速？

我如何判断（出于测试目的）是否为CSS动画启用了硬件加速？ 我有以下代码，它基本上放大了一个元素并使其全屏（不使用HTML5全屏API）。 当使用jQuery动画时，它在大多数手机上像一只口吃的哮喘龟一样运行，所以我使用的是CSS3。 这是jsFiddle示例： $(“#makeFullscreen”).on(“click”, function() { var map = $(“#map”), mapTop = map.offset().top, mapLeft = map.offset().left; $(“#map”).css({ “position”: “fixed”, “top”: mapTop, “left”: mapLeft, “width”: map.outerWidth(true), “height”: map.outerHeight(true) }); setTimeout(function(){map.addClass(“fullscreen”)},1); return false; }); .mapContainer { width: 150px; height: 200px; position: relative; margin: 0 auto; } .map { background: #00f; position: absolute; top: 0; left: 0; […]