Safari CSS动画多个翻译不起作用
是指在Safari浏览器中，当同时应用多个CSS动画效果时，这些动画效果无法正常展示的问题。
解决这个问题的方法有以下几种：
- 检查CSS动画属性：首先，确保CSS动画属性的书写正确无误。包括动画名称、持续时间、延迟时间、动画类型（线性、缓动等）、动画方向、动画填充模式等。可以使用CSS动画生成器或者在线工具来生成正确的CSS动画代码。
- 检查浏览器兼容性：不同浏览器对CSS动画的支持程度不同，特别是一些较老版本的浏览器。在使用CSS动画时，要确保所使用的动画属性在Safari浏览器中得到支持。可以参考Can I use等网站来查询CSS动画属性的兼容性情况。
- 检查CSS选择器的优先级：如果同时应用了多个CSS动画效果，可能会出现选择器优先级的问题。在CSS中，选择器的优先级是根据其特定性来确定的。如果某个选择器的特定性较低，可能会被其他选择器覆盖。可以通过提高选择器的特定性或者使用!important来提高某个选择器的优先级。
- 检查CSS动画触发方式：CSS动画可以通过触发器来启动，比如:hover、:focus等伪类选择器。在Safari浏览器中，某些伪类选择器可能无法触发CSS动画效果。可以尝试使用JavaScript来触发CSS动画，或者使用其他可触发动画的方式。
- 更新Safari浏览器版本：Safari浏览器会不断更新，修复一些已知的CSS动画兼容性问题。如果遇到CSS动画无法正常展示的问题，可以尝试更新Safari浏览器到最新版本，以获得更好的兼容性支持。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动开发平台（MPS）：https://cloud.tencent.com/product/mps
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse
相关·内容
1回答
我有以下代码，可以在除Safari之外的所有其他浏览器中运行： width: 300px; background: cyan;skew(25deg); transform: translateX(-42px) translateY(166px) skew(25deg);}。
浏览 10提问于2018-02-16得票数 1
回答已采纳
我有动画使用翻译一个2D翻译。但我希望执行硬件加速，因此使用了translate3d()。{ -webkit-transform: translate3d(0%,110%,0%); /** Safari & Chromeobjecttransition { -webkit-transition: all 0.5s linear; /** Chr
浏览 2提问于2014-01-17得票数 2
回答已采纳
3回答
我正在尝试使用translate3d：通过CSS3事务来为元素添加动画。// for start animation .css("-webkit-transition", "all 100s");// for stop animation
浏览 5提问于2013-03-19得票数 2
1回答
我用一个简单的svg制作了一个小的CSS动画，将我的汉堡菜单转换为一个十字。它在Chrome和Firefox上运行正常，但在Safari中没有翻译。动画播放，甚至正确地重置，所以它与前缀无关(我尝试过)。画十字的两条线的翻译是错误的。我猜这与safari在应用缩放时如何处理转换有关。有没有人知道我是不是做错了什么？
@keyframes showCross {
浏览 2提问于2020-09-09得票数 0
1回答
在一个动画中尝试在safari中对多个属性进行动画处理似乎行不通。html,css,output 在safari中根本不起作用。动画每个属性，变换或过滤器单独工作很好。这是一个已知的bug吗?有解决方法吗？
浏览 18提问于2019-09-21得票数 0
最初，我在覆盖图中显示了CSS加载动画，以向用户显示页面实际上正在执行某些操作。我的问题是在Safari (在MacOS或iOS上)超时是不起作用的。它适用于所有其他浏览器，包括Mac上的Chrome。
浏览 2提问于2018-11-07得票数 1
1回答
我创建了一个简单的css动画，垂直翻译一个伪元素。这款动画在Chrome、FireFox和Safari中效果很好，但在Microsoft或Internet中效果不太好。
在边缘和IE中的外观：动画示例： 0% {
transform: translate(-50%
浏览 3提问于2017-04-11得票数 1
回答已采纳
1回答
我尝试在页面重定向上显示加载器动画，重定向是通过表单提交启动的。但是动画在Safari和IE中不起作用。我已经尝试过CSS关键帧动画，GIF和视频都不起作用。在Safari和IE11中遇到这个问题。
浏览 27提问于2019-12-20得票数 0
2回答
我已经使用关键帧为HTML/CSS3 3创建了一个动画。动画工作在Chrome，但在Safari，它不能正确地翻译，直到动画结束。这里是- snapping in safari在这里，它是- smoothly动画到位置-在铬下面是动画CSS：
浏览 0提问于2018-08-30得票数 9
1回答
我有一个SVG与一个简单的CSS动画，这是完美的工作在每个浏览器。 } transform: translate(50%, -50%) rotate(-360deg);}
第一个关键帧被应用(翻译
浏览 7提问于2022-04-18得票数 0
3回答
jQuery动画不透明不想使用Safari；由于某些原因，当我直接在CSS中设置不透明度时，它是可以的；但是当我尝试使用jQuery动画时，它不起作用。有什么想法/已知的问题吗？我正在直接编辑SVG标记，在其他浏览器上工作，但似乎是safari的一个问题。
浏览 6提问于2012-11-15得票数 2
我们刚刚花了一些时间来研究IE7/8中一些非常奇怪的jQuery/css行为。这在FF，Chrome，Safari，iPad，甚至IE9上都很有效，但在IE7或8上我们得到了一个Javascript经过一番挠头之后，我们最终这样做了：/* Kl
浏览 0提问于2011-06-29得票数 3
回答已采纳
1回答
我使用的是HTML5横幅，它有很多CSS3动画。为了制作可重用的关键帧动画，我在单个元素上使用多个动画。除了狩猎，它运转得很好。将多个动画合并为一个&这个解决方案增加了keyframes rule的复杂性，而且对于复杂的动画来说很难维护。在我的例子中，这只适用于safari &第一个动画只是运行，而不是第二个动画。如果我没有在多个动画上动画
浏览 1提问于2016-01-04得票数 6
然后，通过悬停将条形与翻译的css动画放在一起。最后，栏杆在悬停时不睡觉。
但是这些条子并不是溢出的:当它的转换充满活力时，它是隐藏的。在google中，它工作得很好，但在SAFARI中，它会显示条形图，直到动画完成为止。
浏览 2提问于2018-01-26得票数 3
回答已采纳
背景:我正在创建一个基本的动画，在一个男孩的形象走到一个女孩的形象，并停止。我正在使用CSS3 3-翻译来实现它。boy-left-hand').css('-webkit-animation-play-state','paused'); $('#boy
浏览 1提问于2016-11-12得票数 0
回答已采纳
我试图使用一个滑块来“转换:缩放(x，x)”css3“动画”在火狐。如果我关闭动画，滑块和缩放工作。如果我打开动画，它会动，但是缩放不起作用。$("#slider-step").on("change", function(e){
scale= $("#sli
浏览 5提问于2014-03-19得票数 3
回答已采纳
1回答
: 50%; -webkit-transform: translate3d(50%, 50%, 0);我使用转换动画转换和宽度在同一时间它在其他浏览器中运行良好，但在safari中却不起作用。我不想再多创造一个元素。
浏览 2提问于2021-07-01得票数 0
我的目标是在Safari上正确地加载CSS动画。目前的动画工作在Chrome和勇敢，但它不能正确地工作在我的iPhone的Safari浏览器。据我所知，它在除Safari之外的所有浏览器上都能正常运行。 } clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
浏览 2提问于2020-04-11得票数 0
回答已采纳
悬停效应在这两种浏览器上都可以使用，但是我正在尝试诊断为什么边界底部不能在Safari上工作。 <div class="text">STEVE</div> </div>
CSS
浏览 8提问于2014-03-02得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
