Как я могу заставить анимационный контент появляться в сафари? - PullRequest
Новая
       6

Как я могу заставить анимационный контент появляться в сафари?

1 голос
/ 20 мая 2019

У меня есть анимация, в которой текстовый контент меняется каждые несколько секунд, кажется, что он отлично работает в Firefox и Chrome, но в Safari анимация запускается, но контент не отображается. Не удается найти какие-либо известные проблемы совместимости с Safari?

пример:
https://codepen.io/gazrobbo/pen/dEMVRE

<body>
  <div class="sp-container">
    <div class="sp-content">
      <h2 class="frame-1"></h2>
    </div>
  </div>
</body>

body {
  background: blue;
}

.sp-container {
  grid-area: text;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  justify-items: center;
}

.sp-content {
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
  width: 70%;
  height: 40%;
  z-index: 1000;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.sp-container h2 {
  position: absolute;
  top: 25vh;
  line-height: 4rem;
  height: 90px;
  margin-top: -50px;
  font-size: 3.5rem;
  width: 100%;
  text-align: center;
  color: transparent;
  font-family: beyond_infinity_-_demoregular;
}

@media only screen and (min-width: 600px) {
  .sp-container h2 {
    top: 30vh;
    font-size: 4.75rem;
  }
}

.sp-container h2.frame-1 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  /* animation: blurFadeInOut1 15s ease-in backwards; */
  -webkit-animation-name: blurFadeInOut1;
  animation-name: blurFadeInOut1;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.frame-1:after {
  content: "";
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  /* animation: blurFadeInOuttext 15s ease-in backwards; */
  -webkit-animation-name: blurFadeInOuttext;
  animation-name: blurFadeInOuttext;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes blurFadeInOut1 {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  5%,
  15% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  20% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  21% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    content: "2";
  }

  25%,
  35% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  40% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  41% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    content: "3";
  }

  45%,
  55% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  60% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  61% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  65%,
  75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  80% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  81% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  85%,
  95% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}

@keyframes blurFadeInOut1 {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  5%,
  15% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  20% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  21% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    content: "2";
  }

  25%,
  35% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  40% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  41% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    content: "3";
  }

  45%,
  55% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  60% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  61% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  65%,
  75% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  80% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  81% {
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  85%,
  95% {
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}

@-webkit-keyframes blurFadeInOuttext {
  6% {
    content: "Creative Concepts";
  }

  26% {
    content: "Brand Management";
  }

  46% {
    content: "Reprographics";
  }

  66% {
    content: "Flexo HD";
  }

  86% {
    content: "Website Development";
  }

  100% {
    content: "Website Development";
  }
}

@keyframes blurFadeInOuttext {
  6% {
    content: "Creative Concepts";
  }

  26% {
    content: "Brand Management";
  }

  46% {
    content: "Reprographics";
  }

  66% {
    content: "Flexo HD";
  }

  86% {
    content: "Website Development";
  }

  100% {
    content: "Website Development";
  }
}

Я попытался изменить на 5 отдельных анимаций, это работает, но я бы предпочел оставить это как 1 анимацию, если бы смог заставить это работать.

В идеале я хочу, чтобы текст изменял содержимое и отображался после каждого действия постепенного появления и исчезновения.

1 Ответ

0 голосов
/ 20 мая 2019

Использовать библиотеку Animate.css, пример 

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet"        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
    </head>
    <body>
        <h1 class="animated jello">Ahmed Mansour</h1>
  </body>
</html>
...