css-animations

10热度

2回答

以下HTML示例由两张图片组成;一个背景，另一个是对象。两者都使用缩放和旋转进行动画制作。在全高清显示器上，它往往是波涛汹涌。当您查看Firefox中的性能时，它可以获得大约20fps的速度。首先我用jQuery;为了提高性能，我选择了CSS，但它仍然不完美。为了重现问题，请全屏显示。我怎样才能让它变得更好？ .html, body { height: 100%;

0热度

1回答

如何延迟替代元素的转换？

section_swipe = document.querySelectorAll("p.swipe") section_swipe.forEach((v) => { setInterval(() => v.classList.toggle('revealed'), 3000) }) p.swipe { height: auto; pad

1热度

1回答

CSS动画 - 将放大镜图标变为交叉

我想通过以下示例使用CSS动画将放大镜转换为十字图标。这是我第一次使用动画，我无法弄清楚如何把手柄放在放大镜下面。这里是fiddle。这是原来的demo。这是HTML： <div id="magnifier"> <div class="magnifier-icon"> <span class="magnifier-handle"></span> <span cla

0热度

2回答

VueJS的过渡和CSS动画

我试图实现包含CSS动画两个元素之间的转换只需遵循documentation's example。我的HTML包含：A键来改变我的状态： <button @click="toggled = !toggled"> Toggle class ({{ toggled }}) </button> 与2名装填手（红色和黑色的）过渡： <transition name="fade" mode

3热度

1回答

旋转背景图像的方向相反

问题[已解决]：如何旋转背景图像的圆形？链接：https://codepen.io/Refath/pen/XaoMEj 嗨，我想转一圈元素的背景图像相反的方向，但在相同的旋转幅度，使背景仍然相对于用户直。我试图使用CSS关键帧，但意识到这不会是最好的主意，然后尝试实现给定[这里] [1]的解决方案，也失败后一些调整。谢谢;任何帮助表示赞赏（我不是一个先进的Web开发人员，所以我没有用JS太多的

0热度

1回答

触发SVG线动画重置它关闭屏幕视图

here's a jsfiddle : https://jsfiddle.net/20zhrw1o/ ，我想触发的画面时，考虑到线路的动画和复位，这样，如果我滚动回到它的动画开始再次，我不擅长js，所以谢谢任何帮助！也可以用scrollreveal插件做这个吗？

9热度

1回答

如何使用@ angular/animations动画ScrollTop？

我试图从Material.io复制此动画：要只是导航就像在上面的例子中的第一张牌上点击的高度也很简单。只是有生命的高度属性。问题在于点击第二张卡片，然后将其他卡片推开。对此的一个解决方案是使用滚动来模拟事物被推开的效果。所以当你点击这个项目时，它通过动画高度使它更高，但同时也滚动视图。我的问题：我似乎无法弄清楚如何动画滚动与@angular/animations。我不能使用style({

0热度

1回答

电子应用程序css动画性能问题

我在电子应用程序中使用CSS动画。下面是代码： https://codepen.io/anon/pen/KvbVYV 当我打开与动画的应用程序启用CPU使用率是147％但如果我评论这行 -webkit-animation: progress-indef 1s linear infinite; animation: progress-indef 1s linear infinite;

3热度

2回答

CSS动画过程中的z-index分层问题

我试图让一个动画邀请出来的信封。我所想要的大部分都是我想要的，但是我遇到的问题是，当你“打开”信封时，邀请会在信封外弹出一秒钟，然后再回到内部并开始动画。我确定这是一个与动画结合的z-index问题，但我不确定从哪里开始寻找。我在哪里：https://codepen.io/zackpyle/pen/JyxpbM <style> body{ font-family: he

3热度

1回答

动态创建具有绝对的位置，这可以扩展到整个屏幕的div

我试图创造一些这样的： https://tympanus.net/Development/FullscreenLayoutPageTransitions/ 但我面临的问题是，我的div是动态的 - 可以是任意数量的来自xhr服务电话。我试图叠加div，但点击后，它们不会从它们的位置增长到占据整个屏幕，而是从左上角这样增长： https://codepen.io/anon/pen/vJPNOq。如