为什么我的CSS动画在Safari 12中不起作用？
在Safari 12中，CSS动画可能不起作用的原因有以下几个可能性：
- 浏览器兼容性问题：不同浏览器对CSS动画的支持程度可能不同，Safari 12可能对某些CSS属性或动画效果的支持不完善。这可能导致在其他浏览器中正常工作的动画在Safari 12中无法正常显示。
- CSS属性前缀问题：某些CSS属性在不同浏览器中需要添加特定的前缀才能正常工作。在Safari 12中，可能需要添加-webkit-前缀来支持某些CSS属性。例如，使用@keyframes定义动画时，可能需要添加-webkit-前缀。
- Safari 12的Bug：Safari 12可能存在一些已知的Bug，导致CSS动画无法正常工作。这些Bug可能与特定的CSS属性或动画效果有关。在这种情况下，可能需要查找Safari 12的Bug报告或官方文档，以了解是否存在已知的问题和解决方法。
解决这个问题的方法可以尝试以下几个步骤：
- 检查CSS代码：确保CSS代码中没有语法错误或拼写错误。检查动画相关的CSS属性和值是否正确，并且是否需要添加浏览器前缀。
- 检查浏览器兼容性：查阅Safari 12的官方文档或Bug报告，了解是否存在已知的CSS动画兼容性问题。如果有已知的问题，可以尝试使用其他CSS属性或动画效果来替代。
- 更新浏览器版本：如果您使用的是较旧的Safari版本，尝试升级到最新版本，以获得更好的CSS动画支持。
- 使用JavaScript库：如果CSS动画在Safari 12中仍然无法正常工作，可以考虑使用JavaScript库来实现动画效果。例如，使用jQuery或GreenSock等库可以提供更好的浏览器兼容性和更强大的动画功能。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：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
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云物联网平台（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
相关·内容
我有一个页面，需要8-10秒来加载，因为服务器对外部服务进行API调用，这会处理一些大数字。此函数在提交表单后调用。我的问题是在Safari (在MacOS或i
浏览 2提问于2018-11-07得票数 1
1回答
我尝试在页面重定向上显示加载器动画，重定向是通过表单提交启动的。但是动画在Safari和IE中不起作用。我已经尝试过CSS关键帧动画，GIF和视频都不起作用。在Safari和IE11中遇到这个问题。
浏览 27提问于2019-12-20得票数 0
1回答
我有一个动画在Chrome (80)和Firefox (57)中工作得很好，但在Safari (12)中根本不起作用。 我所期望的是在屏幕上从左上角到右下角绘制一条直线。我已经尝试了我的代码的十几种变体，以下是其中之一：(我尝试的所有变体在Chrome和Firefox中都工作得很好) #move { left:0;
width： web
浏览 13提问于2020-04-20得票数 0
opacity : 0.0 }) </script>不透明动画在Firefox和Chrome中播放得很顺利，但safari 5却没有？为什么会这样呢？我感谢你提前提供帮助。
浏览 3提问于2011-04-07得票数 0
3回答
CSS3动画不工作
、、、
我已经用css3为SVG创建了一个动画，它在Chrome和Firefox中运行得很好。它在Safari中部分工作，但在Internet (支持css动画的IE9+)中不工作。CSS: 70%,80% { fill-opacity: 0; -ms-animation-fill-mo
浏览 3提问于2014-06-19得票数 10
我使用的是translate动画，但它在Safari或Chrome中不起作用。我做错了什么？这是我的代码，<div id="animate"></div>#animate { top: 100px;
left: 30px
浏览 0提问于2013-03-12得票数 0
回答已采纳
我尝试将转换为jquery滑块。放大动画在css版本中非常流畅，但在我的jquery版本中却不是这样。我使用.animate()函数： .animate({opacity: 1}, 1000) width:'+=70px',height:'+=70px', left: '-=40px
浏览 3提问于2012-01-03得票数 1
回答已采纳
我在firefox和safari中遇到了这个动画问题。动画在chrome中工作。我试过使用-Moz- and -WebKit供应商前缀，但是firefox和safari已经支持动画了。CSS： .vision-div { width: 100%;}
.vision-grid-div {
浏览 61提问于2021-08-30得票数 1
1回答
我的CSS内容动画在iOS上不起作用，Safari和Chrome都是如此。但它可以在安卓和Windows桌面上运行。 我在SO和google上看到了其他类似的问题。修复方法是使用-webkit-*，但没有用于内容的-webkit。
浏览 15提问于2021-01-02得票数 1
回答已采纳
我构建了一个图像滑块，它使用jquery创建图像的“循环”。如果转到右侧，则第一张图像将优先显示在末尾。如果你走到左边，最后一张图片是在开始的地方。左边距值用于创建滑动外观。到目前为止，它似乎可以工作，但在Safari中，页边距的动画不起作用。它应该使用一个缓动函数在-100px和-200px之间缓动。但也有大约4000px的值。还有其他人，他们在Safari中有跳跃问题，但我找不到解决方案。).first();
$
浏览 3提问于2013-01-16得票数 0
回答已采纳
1回答
我在上使用了Nirvana Tikku的Jquery菜单插件。在IE8中，弯曲的梯形在默认情况下没有正确地定位自己。否则，动画工作得很好。这让我相信这个问题有其根源于一些古怪的，IE8 CSS问题。
另一方面，Saf
浏览 1提问于2012-01-24得票数 0
2回答
你好，我正在尝试创建HTML/CSS按钮，还有下一个想法：问题：
HTML: <a href="https://www.facebook.com/"><p class="follow">Follow</p></a>
</div
浏览 3提问于2015-09-10得票数 1
回答已采纳
我一直在尝试制作一个在页面加载时播放的标题动画。它在Firefox和Chrome中工作得很好，但在Safari中有一个小bug。 </div>
浏览 0提问于2016-09-16得票数 0
2回答
我对CSS动画有一个问题。动画在IE10 (以及Chrome，Mozilla，Safari)中工作得很好，但在IE9 (以及IE边缘)中不起作用。这是我的CSS：-webkit-animation-name: tossing07;
-webkit-animation-duration
浏览 3提问于2014-07-04得票数 0
回答已采纳
2回答
我正在尝试执行一个CSS动画，其中循环了许多图像。我很欣赏人们通常会使用一个精灵(这样做可以使用这个代码)，但是由于我希望在iBooks中使用这个动画，所以我必须将每个图像的像素限制在200万像素以内，所以我使用的是单独的图像。因此，我尝试使用以下CSS，但没有成功： width: 200px; background:url('../Images/m
浏览 0提问于2012-08-07得票数 4
1回答
我有一个扩展的线动画在我的网站上使用CSS3。它是使用div宽度上的关键帧创建的，很自然地，它似乎正在向左向右扩展。然而，我希望它能从右向左扩展。我试过在动画方向使用“反向”，但没有joy。知道为什么吗？谢谢。这是我的小提琴.line_left { width: 32vw;
backgr
浏览 5提问于2014-04-21得票数 0
回答已采纳
考虑一下这个简单的SVG文档：<svg xmlns="http://www.w3.org/2000/svg">
text { font-size: 400%; }但是，在Safari中，只有不透明属性是动画的，并且只考虑了
浏览 4提问于2017-02-24得票数 0
我刚刚意识到，MacOS10.15.4和iOS 13.4附带的最新版本Safari (v13.1)不再支持SVG文件中的css动画。我使用这个技巧在我的投资组合中显示一个加载动画。现在只显示下垂文件的第一个帧，动画没有启动。Chrome或Firefox没有问题。以下是嵌入该文件的页面中相应的CSS属性.loading {
background-
浏览 6提问于2020-04-01得票数 4
回答已采纳
2回答
为什么Safari和Chrome忽略最小宽度的CSS属性？Example 这在IE和火狐浏览器中有效，但在Safari和Chrome中不起作用。
浏览 0提问于2011-08-17得票数 18
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
