时间戳

首页 > 解决方案 > @keyframes 动画在 Safari（macOS、iOS）上不起作用

css - @keyframes 动画在 Safari（macOS、iOS）上不起作用

问题描述

我有一个文字滑动动画代码，它可以在 Google Chrome 上完美运行，但在 Safari 上却不行。我的意思是第一句话有效，但是如果您想查看其他句子，则必须单击动画所在的位置才能使它们出现。

这是CSS：

.random-facts-container {

.random-facts-header h1 {
  text-align: center;
  font-family: "RooneyPro-Medium";
  font-size: 35px;
  letter-spacing: -0.5px;
  margin-bottom: 0;
  padding: 5rem 0;
}

.factsCarousel {
  margin: 0 auto;
  max-width: 1200px;
  margin-bottom: 10rem;

  .facts {
    text-align: center;
    overflow: hidden;
    height: 65px;

    h2 {
      background: linear-gradient(271deg ,#a0e9ff 30%,#a162e8 50%,#f093b0 70%,#edca85 94%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: "RooneyPro-Bold";
      letter-spacing: -0.5px;
      margin-bottom: 0;
      font-size: 48px;
      padding-bottom: 3rem;

      ul {
        padding: 0;

        li {
          height: 45px;
          margin-bottom: 45px;
          display: block;
        }
      }
    }
  }
}

.flip8 {
  -webkit-animation-name: flip8;
  -webkit-animation-duration: 20s;
  -webkit-animation-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1.2);
  -webkit-animation-iteration-count: infinite;
  animation-name: flip8;
  animation-duration: 20s;
  animation-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1.2);
  animation-iteration-count: infinite;
}

@-webkit-keyframes flip8 {
  0% { margin-top: -720px; }
  6.25% { margin-top: -630px; }
  12.5% { margin-top: -630px; }
  18.75% { margin-top: -540px; }
  25% { margin-top: -540px; }
  31.25% { margin-top: -450px; }
  37.5% { margin-top: -450px; }
  43.75% { margin-top: -360px; }
  50% { margin-top: -360px; }
  56.25% { margin-top: -270px; }
  62.5% { margin-top: -270px; }
  68.75% { margin-top: -180px; }
  75% { margin-top: -180px; }
  81.75% { margin-top: -90px; }
  88% { margin-top: -90px; }
  94.25% { margin-top: 0px; }
  99.99% { margin-top: 0px; }
  100% { margin-top: -720px; }
}

}

我尝试在关键帧之前添加 @-webkit- 但仍然不起作用。我也尝试使用整个百分比和整数，没有结果。

https://jsfiddle.net/timdavhen/39dgehr7/5/

标签： csssafaricss-animations

解决方案

不要在动画中使用margin,padding和 position 属性（left, top, right, ）。bottom这是一个不好的影响，并导致冻结和滞后。始终使用transform: translate.

推荐阅读