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 检测浏览器换行

我需要 javascript 来检测每个浏览器包装的文本行并将其包装到 span class line 我读过一些关于测量每个单词的 y 轴的文章但还没有看到可靠的解决方案这是我到目前为止所拥有的看到它Jsfiddle http js
PHP MySQL 使用选项/选择 HTML 表单标签进行多重搜索查询

我正在尝试使用两个搜索字段设置基本的 MySQL LIKE 搜索我不想拥有它所以它有多个可选搜索字段例如if isset POST city isset POST name 我不知道如何用 HTML 来做到这一点
html 和 body 元素的高度

我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些
Google Maps API 下拉列表，缩放至标记

我正在使用 Google Maps API v3 我有一个带有一些标记的简单地图我还有一个下拉列表我需要最少的代码来完成这项工作我想在下拉列表中选择一个标记并将选定的标记平移到它我已经尝试了一切并在网上查看我发现事情很接近但到
如何检测浏览器是否支持自定义元素

我正在查看 Modernizr 它应该有助于功能检测这应该可以帮助确定您的网站是否与给定的 Web 浏览器兼容但我没有看到任何表明我可以使用它来检测自定义 HTML 的内容我们在内容中创建和定义的元素如果不是 Modernizr 我如
CSS 中的像素与像素密度

我对 HTML 和 CSS 非常陌生我突然想到当决定某个东西是 5px 时比如说由于像素的物理尺寸取决于密度所以 5px 在 100 ppi 的屏幕上看起来肯定比在 300 ppi 的屏幕上看起来更大ppi 这是正确的吗如果是
每 3 秒重复一次动画

我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for
使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
如何更改bootstrap中form-control弹出窗口中必填字段的默认消息？
如何设置菜单按钮和菜单项的样式

我尝试更改菜单按钮中的样式我可以更改菜单按钮样式但不能更改其菜单项无论我尝试什么菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba
如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录？

因此就我而言我使用 Iframe 将 Grafana 附加到我的页面这为我提供了漂亮且易于使用的图表可以注意到每次在图表上进行放大或缩小使用鼠标单击交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触
MVC 在布局代码之前执行视图代码并破坏我的脚本顺序

我正在尝试将所有 javascript 包含内容移至页面底部我正在将 MVC 与 Razor 一起使用我编写了一个辅助方法来注册脚本它按注册顺序保留脚本并排除重复的内容 Html RegisterScript scripts som
HTML 中部分着色的阿拉伯语单词

我不会说阿拉伯语但我需要我们网站上对阿拉伯语的具体支持我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
Iframe 相对路径挑战

我有一个页面在页面内有一个 Iframe 目录如下 Folder1 Folder2 IframeCSS IframeCSS Css iframePage1 html stuff css parentPage1 html 在 iframeP
避免响应式页面的重复内容

我目前正在做一个涉及响应式设计的项目整个布局应该使用HTML和CSS来实现我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局而无需复制内容但是使用 HTML 和 CSS 是否可以实现相同的效果以下面的例子为例它会在
为什么我不能在 AngularJS 中使用 data-* 作为指令的属性名称？

On the t他的笨蛋 http plnkr co edit l3KoY3 p preview您可以注意到属性名称模式的奇怪行为data 在指令中电话 Test of data named attribute br
带有相对路径的 LESS CSS 背景

我在使用 LESS 作为我的网站的样式表时遇到了问题就我个人而言我宁愿在CSS中使用相对路径而不是绝对路径这只是我的习惯但是现在当我使用带有导入功能的LESS时我遇到了如下所示的问题我有一个main less根文件夹中的文件 i
Schema.org 的常见问题解答页面

我有一个常见问题解答页面我想用更好的 html 架构来实现它
无效字符错误：“fred”

我确信他一定是一个新手问题简单来说我想定义我的第一个 Polymer dart 组件只是我一直在同一个减速带上踢脚趾为了使事情变得非常简单我将其简化为一个非常简单的示例我做了一个简单的rename示例跑表来自 Dart 组件
CSS 是否有不等于选择器？

CSS中有类似不等于的东西吗例如我有以下代码 input 但对于某些输入我需要将其作废我想通过将类 reset 添加到输入标签来做到这一点例如

随机推荐

如何在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 翻译问题的相关文章