过渡：旋转在 Safari 中不起作用答案

【问题标题】：Transition: rotate not working in Safari过渡：旋转在 Safari 中不起作用
【发布时间】：2017-10-13 19:12:11
【问题描述】：

网站正在加载时，我有一个加载页面。它在 Chrome 中运行良好，但我需要在 Safari 上修复它，因为它不起作用。这是我的代码：

.se-pre-con {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
}

.loading {
  top: 30%;
  right: 45%;
  position: fixed;
  -webkit-animation: spinHorizontal 4s linear infinite;
  -moz-animation: spinHorizontal 4s linear infinite;
  animation: spinHorizontal 4s linear infinite;
}

@keyframes spinHorizontal {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

<div class="se-pre-con">
  <div class="loading">

    <img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png">
  </div>

【问题讨论】：

你也可以分享你的 HTML 吗？
完成@BrettDeWoody
不一定是解决方案，但您的图像标签需要关闭才能成为有效的 html，如下所示：

标签： css safari webkit

【解决方案1】：

它似乎与.se-pre-con 元素上的position: fixed 有关。尝试使用absolute 定位或以其他方式定位。

.se-pre-con {
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #ffffff;
}

.loading {
  width: 279px;
  height: 279px;
  top: 30%;
  right: 45%;
  position: fixed;
  -webkit-backface-visibility: visible;
  -webkit-animation: spinHorizontal 2s linear infinite;
  -moz-animation: spinHorizontal 2s linear infinite;
  animation: spinHorizontal 2s linear infinite;
  background-color: transparent;
}

@keyframes spinHorizontal {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}

<div class="se-pre-con">
  <div class="loading">

    <img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png" />
  </div>
</div>

【讨论】：

它可以工作，但我需要在网站加载之前有一个白色背景，所以现在它在加载@Brett DeWoody 时显示网站内容
好的。我发现了另一个可能导致它的问题 - position: fixed。