Safari 上的 CSS 翻译问题

2024-03-08

我正在努力将我制作的 Gif 转换为 CSS 动画。在 Chrome、Firefox、Opera 上一切正常，但在 Safari 上却出现问题。

当我最初加载页面时，图像会忽略翻译并位于下方，但是一旦我单击 Safari 选项卡并返回，页面就会更新，并且图像具有翻译给出的适当坐标。

有谁知道为什么会发生这种情况？

HTML:

<section>
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Globe.png" class="globe center" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Red.png" class="center redSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Orange.png" class="center orangeSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Yellow.png" class="center yellowSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Green.png" class="center greenSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Blue.png" class="center blueSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Indigo.png" class="center indigoSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Violet.png" class="center violetSpin" width="50%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/Continents.png" class="center continent" width="170%">
        <img src="http://dev.colecampbell.design/CodePen/GayDay/img/GlobeMask.png" class="center knockOut" width="190%">
    </section>

CSS:

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color:#333;
    overflow: hidden;
}

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display:block;
}

.continent{
    left: 72%;
    animation:slide 9s infinite;
    animation-timing-function: linear;
    z-index: 3;
    transform: translate(-50%,-50%);
}

.globe{
    z-index: 2;
    transform: translate(-50%, -50%);
}

.knockOut{
    z-index: 4;
    transform: translate(-50%,-50%);
}


/*All working above!*/


/*ANIMATION*/

/*Content Slide Animation*/
.slide{
    animation: ;
}

@-webkit-keyframes slide {
    from{left: 71%;}
    to{left: 28.5%;}
}

@-moz-keyframes slide {
    from{left: 71%;}
    to{left: 28.5%;}
}

@keyframes slide {
    from{left: 71%;}
    to{left: 28.5%;}
}

/*Red Arc Animation*/
.redSpin {
    -webkit-animation:spinRed 10s linear infinite;
    -moz-animation:spinRed 10s linear infinite;
    -o-animation:spinRed 10s linear infinite;
    animation:spinRed 10s linear infinite;
}

@-o-keyframes spinRed { 
    0% { -o-transform: translate(-50%,-50%) rotate(0deg); } 
    60% { -o-transform: translate(-50%,-50%) rotate(540deg); } 
    100% { -o-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@-moz-keyframes spinRed { 
    0% { -moz-transform: translate(-50%,-50%) rotate(0deg); } 
    60% { -moz-transform: translate(-50%,-50%) rotate(540deg); } 
    100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@-webkit-keyframes spinRed { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); } 
    60% { -webkit-transform: translate(-50%,-50%) rotate(540deg); } 
    100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@keyframes spinRed { 
    0% { transform: translate(-50%,-50%) rotate(0deg); } 
    60% { transform: translate(-50%,-50%) rotate(540deg); } 
    100% { transform: translate(-50%,-50%) rotate(1080deg); } 
}

/*Orange Arc Animation*/
.orangeSpin {
    -webkit-animation:spinOrange 5s linear infinite;
    -moz-animation:spinOrange 5s linear infinite;
    -o-animation:spinOrange 5s linear infinite;
    animation:spinOrange 5s linear infinite;
}

@-o-keyframes spinOrange { 
    0% { -o-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -o-transform: translate(-50%,-50%) rotate(-720deg); } 
}

@-moz-keyframes spinOrange { 
    0% { -moz-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -moz-transform: translate(-50%,-50%) rotate(-720deg); } 
}

@-webkit-keyframes spinOrange { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -webkit-transform: translate(-50%,-50%) rotate(-720deg); } 
}

@keyframes spinOrange { 
    0% { transform: translate(-50%,-50%) rotate(0deg); }  
    100% { transform: translate(-50%,-50%) rotate(-720deg); } 
}

/*Yellow Arc Animation*/
.yellowSpin {
    -webkit-animation:yellowSpin 10s linear infinite;
    -moz-animation:yellowSpin 10s linear infinite;
    -o-animation:yellowSpin 10s linear infinite;
    animation:yellowSpin 10s linear infinite;
}

@-o-keyframes yellowSpin { 
    0% { -o-transform: translate(-50%,-50%) rotate(-0deg); } 
    50% {-o-transform: translate(-50%,-50%) rotate(-380deg);}
    100% { -o-transform: translate(-50%,-50%) rotate(-1080deg); } 
}

@-moz-keyframes yellowSpin { 
    0% { -moz-transform: translate(-50%,-50%) rotate(-0deg); } 
    50% {-moz-transform: translate(-50%,-50%) rotate(-380deg);}
    100% { -moz-transform: translate(-50%,-50%) rotate(-1080deg); } 
}

@-webkit-keyframes yellowSpin { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(-0deg); } 
    50% {-webkit-transform: translate(-50%,-50%) rotate(-380deg);}
    100% { -webkit-transform: translate(-50%,-50%) rotate(-1080deg); } 
}

@keyframes yellowSpin { 
    0% { transform: translate(-50%,-50%) rotate(-0deg); } 
    50% {transform: translate(-50%,-50%) rotate(-380deg);}
    100% { transform: translate(-50%,-50%) rotate(-1080deg); } 
}

/*Green Arc Animation*/
.greenSpin {
    -webkit-animation:greenSpin 10s linear infinite;
    -moz-animation:greenSpin 10s linear infinite;
    -o-animation:greenSpin 10s linear infinite;
    animation:greenSpin 10s linear infinite;
}

@-o-keyframes greenSpin { 
    0% { -o-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -o-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@-moz-keyframes greenSpin { 
    0% { -moz-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@-webkit-keyframes greenSpin { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@keyframes greenSpin { 
    0% { transform: translate(-50%,-50%) rotate(0deg); } 
    100% { transform: translate(-50%,-50%) rotate(1080deg); } 
}

/*Blue Arc Animation*/
.blueSpin {
    -webkit-animation:blueSpin 10s linear infinite;
    -moz-animation:blueSpin 10s linear infinite;
    -o-animation:blueSpin 10s linear infinite;
    animation:blueSpin 10s linear infinite;
}

@-o-keyframes blueSpin { 
    0% { -o-transform: translate(-50%,-50%) rotate(0deg); } 
    50% {-o-transform: translate(-50%,-50%) rotate(-530deg);}
    100% { -o-transform: translate(-50%,-50%) rotate(-1080deg); } 
}

@-moz-keyframes blueSpin { 
    0% { -moz-transform: translate(-50%,-50%) rotate(0deg); } 
    50% {-moz-transform: translate(-50%,-50%) rotate(-530deg);}
    100% { -moz-transform: translate(-50%,-50%) rotate(-1080deg); } 
}

@-webkit-keyframes blueSpin { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); } 
    50% {-webkit-transform: translate(-50%,-50%) rotate(-530deg);}
    100% { -webkit-transform: translate(-50%,-50%) rotate(-1080deg); } 
}

@keyframes blueSpin { 
    0% { transform: translate(-50%,-50%) rotate(0deg); } 
    50% {transform: translate(-50%,-50%) rotate(-530deg);}
    100% { transform: translate(-50%,-50%) rotate(-1080deg); } 
}

/*Indigo Arc Animation*/
.indigoSpin {
    -webkit-animation:indigoSpin 10s linear infinite;
    -moz-animation:indigoSpin 10s linear infinite;
    -o-animation:indigoSpin 10s linear infinite;
    animation:indigoSpin 10s linear infinite;
}

@-o-keyframes indigoSpin { 
    0% { -o-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -o-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@-moz-keyframes indigoSpin { 
    0% { -moz-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@-webkit-keyframes indigoSpin { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); } 
}

@keyframes indigoSpin { 
    0% { transform: translate(-50%,-50%) rotate(0deg); } 
    100% { transform: translate(-50%,-50%) rotate(1080deg); } 
}

/*Violet Arc Animation*/
.violetSpin {
    -webkit-animation:violetSpin 10s linear infinite;
    -moz-animation:violetSpin 10s linear infinite;
    -o-animation:violetSpin 10s linear infinite;
    animation:violetSpin 10s linear infinite;
}

@-o-keyframes violetSpin { 
    0% { -o-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -o-transform: translate(-50%,-50%) rotate(360deg); } 
}

@-moz-keyframes violetSpin { 
    0% { -moz-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -moz-transform: translate(-50%,-50%) rotate(360deg); } 
}

@-webkit-keyframes violetSpin { 
    0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); } 
    100% { -webkit-transform: translate(-50%,-50%) rotate(360deg); } 
}

@keyframes violetSpin { 
    0% { transform: translate(-50%,-50%) rotate(0deg); } 
    100% { transform: translate(-50%,-50%) rotate(360deg); } 
}

代码笔：http://codepen.io/Cole-Campbell/pen/MJVxdK http://codepen.io/Cole-Campbell/pen/MJVxdK

您可以使用供应商前缀进行转换，如下所示。它对我有用。

-webkit-transform: translate(-50%,-50%);
-webkit-transform: -webkit-translate(-50%,-50%);

您也可以在这里查看caniuse.com http://caniuse.com/#feat=transforms2d用于供应商浏览器支持。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

safari

crossbrowser

cssanimations

Safari 上的 CSS 翻译问题的相关文章

JavaScript 中带前导零的数字发生变化

我使用 print 语句从 php 调用 javascript 函数来打印 html 代码并且传入一个整数但是在 php 中传递的值与 javascript 函数接收到的数字不匹配我不知道为什么这是调用 javascript 函数
Bootstrap 中的旋转字形 / Font Awesome

我试图让引导站点中的字形在悬停时旋转除了更改颜色之外这是我的尝试 http jsfiddle net young greedo17 88g5P http jsfiddle net young greedo17 88g5P 使用此代码 d
使用绝对定位时文本被破坏

我有一个小挑战我在 Stack Overflow 上没有找到任何解决方案这就是我得到的这就是我想要的为了产生这个标题效果我使用绝对位置我什至不知道我的标题的宽度和高度因此使用此解决方案时大文本会中断 My HTML div
Javascript 使事件点击和语音识别与多个按钮一起工作

所以我正在使用 webkitSpeechRecognition 并且它工作得很好但问题是我想同时在多个地方使用它当我将它添加到页面上的另一个部分时它无法正常工作这是它自己工作的情况 var final transcript var
HTML5 仅拖放图像

我想做的是如果所有拖动的文件都是图像则将其删除但如果有其他文件扩展名则不要删除它们而仅删除图像这是我的尝试 HTML div div JavaScript var dropzone document getElementById
我应该使用哪种文档类型？

如果我想使用可定制的 div 我应该使用哪种文档类型具有div动画图像移动设置div不透明度等我尝试通过 javascript 创建一个 div 设置其背景颜色位置宽度和高度并向其添加 onmouseover 事件一切正常
通过 jQuery 选择动态 HTML 元素

我正在构建一个 ASP NET MVC 应用程序并且正在使用jQuery Blueimp https github com blueimp jQuery File Upload动态添加到页面的 PartialView 上的插件根据插件的
像在 tumblr 注册页面上那样鬼写

有谁知道如何创建一个类似 tumblr 的字段 http www tumblr com http www tumblr com 这是一个 URL 字段其中有一些褪色的文本然后当您单击它并键入时它会附加一些文本 tumblr com 您
在iOS上，“添加到主页”缓存保存在哪里，如何清除它？

我正在 iPad iOS v7 上制作一个 html5 游戏当我将其添加到主页时它非常顽固地释放缓存如果我在 Safari 中查看它这会按照您所期望的方式工作如果我刷新一次或两次页面就会以最新状态缓存但在主页上却是另一回事它
Django：使用条件 {% extends %} 使 {% block "div" %} 成为条件

我想分享一个 AJAX 和常规 HTTP 调用之间的模板唯一的区别是一个模板需要扩展 base html html 而另一个则不需要我可以用 extends request is ajax yesno app base ajax htm
将html数据解析成python列表进行操作

我正在尝试读取 html 网站并提取其数据例如我想查看公司过去 5 年的 EPS 每股收益基本上我可以读入它并且可以使用 BeautifulSoup 或 html2text 创建一个巨大的文本块然后我想搜索该文件我一直在使用
CSS 显示无不工作

media screen and min width 900px and max width 1215px menu display none 这不起作用 div 仍然可见但是如果我将 div 更改为 div class menu 代替
如何转义 HTML 字符？在.NET中-->“

如何在 NET 中转义 HTML 字符我正在从 json 字符串中获取 html 并在标题中得到 amp quot more text 看起来我需要做两次才能得到 amp quot 成为 quot 那么它就是一个如何转义 NET 中的所
检索 css3 缩放元素的宽度/高度

我正在与 offsetWidth 属性的奇怪之处我认为作斗争这是场景比方说我有一个span标签在我的js中在某个时刻我执行css3转换对于这个元素例如 el set styles transform scale scale
使用 CSS 网格布局使网格项内的元素高度相等

我在长度超过 4 的 div 中有一系列文章没有任何舍入行标签我需要将其表示为每行 3 篇文章列的表格可能包含display grid 每篇文章都有页眉章节和页脚如何在每行文章内实现每个标题的等高每个部分的等高以及与文章底部
内嵌显示定义术语和描述

我正在为页面上的某些元素使用定义列表并需要它们内联显示例如它们normally看起来像我需要它们看起来像注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作但无论我尝试什么它们都无法在 IE 中工作我通常会
如何将 Vue.js 作用域样式应用于通过视图路由器加载的组件？

如何将 Vue js 作用域样式应用于通过以下方式加载的组件
如何简化这个 LESS CSS Box-shadow mixin？（带有“方向”的多个阴影）

如何减少这段代码可能使用循环以拥有一个接受方向和数字的函数 dir 想要的方向 number 我需要多少次影子这里是10次 color 阴影的颜色 Example 可以工作但不是很容易使用 perspective box dir
如何垂直对齐div内的图像

如何在包含的内容中对齐图像div Example 在我的示例中我需要将 img in the div with class frame div class frame style height 25px img src http jsfi
如何在数据列表 HTML PHP 中设置选择

您好我想知道是否有一种方法可以在数据列表中设置选定的值我想要这样的东西

随机推荐

如何在R中按分组列求和？

这是我的输入一个包含 n 列的数据框以及一个将每个 id 分配给一个组的辅助数据框 df lt data frame a1 c 1 2 3 a2 c 2 3 4 b1 c 4 5 6 b2 c 5 6 7 aux lt data fra
iOS 4：FigCreateCGImageFromJPEG 返回 -1

我试图在我的应用程序中运行基本的图像选择器照片拍摄器但遇到了以下错误 ERROR FigCreateCGImageFromJPEG returned 1 Input null was 551120 bytes 我显示了图像选择器相机视
我们如何在 CQ5 中定义全局属性

我的要求是拥有一个具有可创作属性的全局页眉和页脚因此如果我们更新一页上的属性它应该会反映在所有页面上在 CQ5 中实现这一目标的最佳方法是什么 ACS AEM Commons 现在支持此功能无需使用 iparsys 共享组件属性
在没有可用干净版本的情况下清理被黑网站的最佳方法？

我被要求fix在生产服务器上使用 osCommerce 构建的被黑网站该站点始终存在于远程主机上没有离线的clean版本让我们暂时忘记这有多么愚蠢并处理它的本质它已被黑客攻击多次并且另一个人fixed通过删除 Web shell
无法使用 localhost 连接手机上运行的 Android 应用程序

我正在使用 GCM 制作 Android 应用程序我正在尝试通过在手机上运行的应用程序进行注册输入无法使用 php 存储在本地主机 XAMPP 上我的手机和笔记本电脑在同一网络上运行 localhost 的 IP 地址有问题我使用这
当返回类型为标记接口时使用 Jackson 进行多态序列化

我有一个返回标记接口的休息服务并且该接口有多个实现并且在实现中没有任何公共属性 RequestMapping value users userName method RequestMethod GET public User getUs
为什么初始化器列表中的自初始化引用不是错误？

我遇到了一个奇怪的问题如果我尝试编译自赋值对象引用我的编译器针对 ESP32 不会显示任何错误或警告我调查了这个问题发现某些编译器不会显示此代码的任何错误或警告 include
有没有办法反序列化 Elasticsearch Nest 搜索查询？

使用 Nest 构建 Elasticsearch 查询后我希望能够查看发送到 Elasticsearch 的 JSON 版本这可能吗我想是某种解串器这是我的后续问题的信息 infer defaultIndex myindex ack
为什么 Android 对 ConstraintLayout 使用单独的 xmlns

我对 Android 中的 ConstraintLayout 有点困惑我正在学习它首先我感到困惑的是为什么 android 使用单独的 xml 命名空间呢 xmlns app http schemas android com apk r
使用 IIS 和 ACL 的 WCF 授权

我正在尝试保护一些 WCF 服务如果可能的话我想使用 IIS 或 Web config 来完成所有繁重的工作配置我不想在我的代码中嵌入任何东西我想我知道这可能不可行如果可能的话我想实现这一点而不必求助于 AspCompatib
不透明度低于 childs 的容器

我想制作我的网页background color with opacity 0 5但网页内的内容会有一个opacity 1 作为默认值问题是如果我设置opacity 0 5对于容器该容器内的所有子级都相同opacity value 我搜
关于如何使用R和ggplot2绘制背对背图的问题

我的目标是绘制一个金字塔图如所附的那样我找到了几个使用 ggplot 的示例但我仍然在努力将我的示例应用于我的数据或我想要绘制的数据 structure list serial c 40051004 16160610 1609031
Centos 无法安装 mysqli

我无法安装Mysqli 我正在使用 Centos 6 apache 2 2 x 和 php 5 4 MySql 5 5 37 cll I tried yum install php pdo php mysqli 我看到 Loaded plu
使用批处理文件发送电子邮件

我的 Outlook 配置了我的办公室 ID 并且对批处理脚本非常陌生通过批处理文件向我的同事发送电子邮件的最简单的方法最简单的代码是什么 thanks 我可以为你看到 3 个选项最重要的是批处理没有内置方法但有可以从批处理文件
检查优惠券是否应用于 WooCommerce 中的购物车

我需要找到一种方法来检查优惠券是否适用于 WooCommerce 结帐如果是这样我想做点什么我尝试四处寻找这个问题但找不到解决方案这是我正在尝试的精简版本 add action woocommerce before cart ta
自定义 Clipper 贝塞尔曲线 Flutter

我目前无法绘制贝塞尔曲线 The output I have right now is The output that I need is 我应该在此处添加什么作为贝塞尔值来获得曲线自定义剪辑器的代码片段是 class OnBoardin
链接到电子邮件附件

您好我正在发送电子邮件附件使用 php 并想向我向其发送电子邮件的人指出有附件我想通过在电子邮件的 html 正文中显示一个链接来实现此目的因此他们所需要做的就是单击该链接系统将尝试打开查看附件有谁知道这是否可能如果是这样
如何在 Tkinter 中通过一个“绑定”绑定多个小部件？

我想知道如何用一个绑定绑定多个小部件例如我有三个按钮我想在悬停后更改它们的颜色 from Tkinter import def SetColor event event widget config bg red return de
检索客户端的 PC 名称？（Windows 身份验证）

我有一个在内部网络上运行的 ASP net 应用程序实际上它在 Sharepoint 2007 上运行我只是好奇我可以以某种方式检索客户端正在使用的 PC 的名称吗如果有帮助的话我可以访问 Active Directory 问题是
Safari 上的 CSS 翻译问题

我正在努力将我制作的 Gif 转换为 CSS 动画在 Chrome Firefox Opera 上一切正常但在 Safari 上却出现问题当我最初加载页面时图像会忽略翻译并位于下方但是一旦我单击 Safari 选项卡并返回页面就

Safari 上的 CSS 翻译问题

Safari 上的 CSS 翻译问题 的相关文章

随机推荐

热门标签

Safari 上的 CSS 翻译问题的相关文章