如何在Safari中使用CSS进行动画制作？

文章/答案/技术大牛

发布

1回答

iPad上的iBooks/Safari中非常糟糕的JS定时器粒度？

ipad、safari、settimeout、ibooks

他们使用JS、setTimeout和/或requestAnimationFrame制作动画。在对为什么动画运行如此缓慢的原因进行了广泛的调试之后，我发现计时器是在触发，而不是在我请求的20-50毫秒内(并在桌面上运行Chrome或Safari )，间隔时间是的10倍多，有时是1秒或更长的(这是这仅仅是一个慢速处理器的函数(我正在iPad 2上测试)，正如所讨论的或者，这是否与据报道的setTimeout在滚动期间不起作用有关，如所讨论的 (尽管在我的例子<e

浏览 2提问于2012-09-06得票数 1

回答已采纳

2回答

html、css、animation、safari、webkit

Safari不想让我的动画工作得很好。它什么也不说，也不显示任何内容。在Google Chrome中，它工作得很好，但在Safari中就不行了。

浏览 26提问于2020-01-29得票数 0

3回答

起伏过渡:在Safari上转换剥落动画

css、webkit、css-animations、mobile-safari

在Safari (移动)中，我很难制作不太稳定的缩放动画。我的意思是，你可以清楚地看到它不是60 not流体动画。我需要说的是，元素是绝对定位的，所以它不应该影响布局，对吗？我尝试的第一件事是通过创建带有两个关键帧的CSS动画来动画元素，从transform: scale(0);到transform: scale(1);。我取消了它，并对它进行了重新加工，使它使用transition: transform。经过一些研

浏览 0提问于2021-06-20得票数 0

回答已采纳

2回答

GIF动画在所有主流浏览器中运行在与javascript相同的线程上是真的吗？

javascript、ajax、animated-gif

我展示了一个动画GIF，它在AJAX请求进行时运行，并在脚本处理响应后被停止。虽然这样做有效，但我注意到，当来自请求的响应在我的脚本中处理时(其中包含了一些相当重的DOM更新)，动画就冻结了。我的研究让我相信，这是因为GIF的动画发生在javascript运行的同一个线程上--浏览器是真正的单线程。这是所有主流浏览器(如Chrome，Firefox，Safari，IE)的正确解释吗？浏览器真的不可能将一个线程专门用于GIF动画，这样在执行javasc

浏览 4提问于2013-06-04得票数 10

1回答

jQuery中的多重变换动画

jquery、css、jquery-animate、transform

我有一个两部分的问题：$("target").animate({'left':'100px',myScaleProperty: 2, myRotationPreperty: 180}, {step: function(now,tween) { if (tween.prop == myScaleProperty) {

浏览 2提问于2013-04-29得票数 2

回答已采纳

2回答

Webkit动画

css、webkit、css-animations

非常新的CSS webkit动画，并非常热衷于学习它！也有很多无知！所以这几个问题：帕里贾特

浏览 2提问于2011-07-20得票数 0

回答已采纳

1回答

在Safari中加载CSS clip-path失败

css、safari、mobile-safari、transitions、clip-path

我一直在使用CSS的clip-path属性，并用这支笔制作了一个动画标识：。该代码绘制了许多div，并根据我生成的一些三角形动态地将clip-path应用于它们。这在Chrome (43.0.2357.124 (64位) )中可以正常工作。你知道我能做些什么来确保Safari</e

浏览 5提问于2015-06-22得票数 1

1回答

safari中的动画剪辑路径不起作用

css、safari、css-animations、clip-path

我正在制作一个简单的clip-path属性的css动画，使用基本的inset形状来创建扫描效果。这在Chrome和Firefox中运行良好，但在Safari中效果不佳。如果我调整Safari的窗口大小，或者执行其他强制重绘的操作，它确实会渲染动画的当前状态。因此，这似乎是动画没有正确重绘的问题。我使用的是最新版本的Safari: 12.1.1我希

浏览 12提问于2019-07-19得票数 1

回答已采纳

1回答

移动Safari* SVG呈现问题与raphaeljs*

javascript、svg、iphone、raphael

我正在使用制作一个动画的、交互式的图形，我需要在iPhone上很好地工作。我有两个小的渲染问题，我正在挣扎。第一种情况是，每当您单击带有单击处理程序的svg元素时，移动safari就会在其周围绘制一个透明的灰色框，以指示单击的内容。当你点击一个超链接时，它会做同样的事情。在这种情况下，灰色盒子很难看。是否有css属性告诉移动safari不要这样做？第二个问题是动画。在任何动画期间，移动safari都会在svg画布中

浏览 1提问于2009-10-10得票数 5

1回答

当使用CSS3动画属性时，为什么火狐中的CPU使用率这么高？

html、css

今天我要用CSS制作一些关键帧动画。我使用的CSS如下： -o-animation: ballanim 5.6s infinite;作为比较，在这些动画的10倍上：火狐不适合CSS动画

浏览 2提问于2012-12-08得票数 7

1回答

滚动浏览富媒体网页最流畅的方式是什么？

javascript、jquery、html、css、browser

我正在制作一个网页包含几个JavaScript幻灯片，CSS，动画菜单和CSS过渡动画负载，而且我的页面高度在iPad上很长。我有一个导航菜单，当用户单击它时，它将滚动到页面上的特定位置，使用：我的网页在我的macbook pr

浏览 0提问于2012-11-24得票数 1

2回答

CSS无用的供应商前缀

css、flexbox、vendor-prefix

我有一个样式表，我是在2到3年前制作的，当时CSS充斥着这些可怕的flexbox供应商前缀。我根据需要使用了柔性盒，并且使用了Chrome和Safari的-webkit前缀。您知道CSS属性中仍然需要前缀的最新列表吗？在那个时候，供应商的前缀是需要的东西，如梯度或动画。我想知道我是否能安全地移除所有的东西，或者其中的一些还在使用中。

浏览 0提问于2015-12-07得票数 2

回答已采纳

1回答

md-只在OS上第一次单击时才能工作。

angularjs、macos、electron、angularjs-material、md-select

我在电子应用中使用角质化材料(1.x)和角质材料。视图中有两个md-select，当我尝试在windows中使用它时，一切正常。但是当我在OS中使用它时，md-select在第一次单击之后就停止工作了。我单击它并打开项目列表，但是如果再次单击md-select，它将不再显示项目列表。值得注意的是，如果我在第一个md-select中单击，第二个md-select也将停止工作。因为如果我尝试角材料演示页面中的md-selects，它就会像预期的那样工作。我的项目在github，所以任何人都可以尝试它：更新：

浏览 5提问于2017-09-19得票数 10

回答已采纳

1回答

使用Google v3在PolyLine上移动标记

javascript、google-maps、google-maps-api-3、google-maps-markers

我正在使用V3。我正在试图动画在多线上的一个标记顺利。这里我把不动点设为(30，-110)和(30，-100)，这样我就可以根据不动点来制作。

浏览 8提问于2014-01-24得票数 2

2回答

在iphone中创建恶搞动画的代码

iphone、animation

我想在macOS中制作一个类似于poof动画(云动画:将图标拖出码头时发生的动画)的动画。我尝试了很多，但找不到任何代码来做这个animation.So，请指导我如何在iphone中制作这个动画。有没有什么特殊的动画，如收缩，卷曲等，或我们必须创建动画使用png文件

浏览 4提问于2011-10-17得票数 0

回答已采纳

1回答

CSS3动画中的left vs translateX

html、css、google-chrome、safari、css-transitions

我已经创建了；红色的框使用CSS left属性设置动画，蓝色的框使用CSS Transform TranslateX属性设置动画。第一个问题是，最好的选择是什么？总体上哪一个更好？(

浏览 2提问于2012-08-22得票数 1

回答已采纳

1回答

在Safari的CSS3转换结束时维护z索引

css

我想通过单击一个div来更改它的z索引，只使用CSS3。我可以用我的代码在除safari之外的所有浏览器中实现它。我已经尝试过使用:target过渡和:target动画(使用动画-填充-模式:前进)，但这两种方法都不起作用。以下是我的代码(简化)：z-index: 30;transition: all 1s ease-in-out;} 如何在最终值(

浏览 18提问于2020-05-27得票数 0

4回答

CSS3过渡填充

javascript、css、progressive-enhancement、css-transitions

好了，你们中的大多数人都会熟悉CSS3过渡，我更喜欢它而不是jQuery动画，因为它有CSS的简单性。我唯一的遗憾是，它不能在IE < 9(一如既往)以及火狐< 4，Safari <4等中工作。我并不是说只为IE用JavaScript编写单独的动画。但我想要一个解决方案，它将扫描CSS，抓取动画的速度，哪些属性必须动画，并动画他们(使用jQuer

浏览 0提问于2011-08-08得票数 10

回答已采纳

1回答

如何使用jquery平滑地切换边框宽度？

jquery-animate

5px', }, ); } 当我尝试转到5px时，它似乎起作用了，但当我再次运行该函数以将动画恢复到0时，边框立即设置为0，并且只有边距动画。

浏览 3提问于2010-12-09得票数 4

回答已采纳

1回答

在移动Chrome中检测滚动

jquery、google-chrome

当用户滚动页面时，我正在尝试制作动画。我使用的是window.pageYOffset。在Safari中，只要滚动开始，它就会工作，但在Chrome中，它只会在触摸结束后检测到滚动。如何在滚动发生时检测到滚动，而不是在滚动结束时？e){ if (distanceY > 0) { }这在桌面浏览器和移动Safari这是我<e

浏览 1提问于2015-09-11得票数 0

点击加载更多

iPad上的iBooks/Safari中非常糟糕的JS定时器粒度？