html - 为什么我的 CSS 动画在除 Safari 之外的所有浏览器中都有效？

Question

我的 CSS 动画适用于除 Safari 之外的所有浏览器。有人可以告诉我为什么会这样，或者我需要做哪些改变才能使其普遍工作？

    #job-title:before {
        content: '';
        animation-name: animate;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 4s;
        animation-delay: 1s;
    }

    @keyframes animate {
        0% {
            content: "Web Developer.";
        }
        50% {
            content: "Web Designer.";
        }
        100% {
            content: "Graphic Designer.";
        }
    }

标签： htmlcsssafari

Answer 1

您可以尝试-webkit为动画添加前缀吗？

#job-title:before {
  content: '';
  -webkit-animation-name: animate;
  animation-name: animate;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@-webkit-keyframes animate {
  0% {
    content: "Web Developer.";
  }
  50% {
    content: "Web Designer.";
  }
  100% {
    content: "Graphic Designer.";
  }
}

@keyframes animate {
  0% {
    content: "Web Developer.";
  }
  50% {
    content: "Web Designer.";
  }
  100% {
    content: "Graphic Designer.";
  }
}