如何使动画内容出现在野生动物园中？

时间：2019-05-20 07:53:29

标签： css css-animations

我有一个动画，其中文本内容每隔几秒钟更改一次，它似乎在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 :(得分：0)

使用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>

相关问题
最新问题