为什么除了Safari之外，我的CSS动画在所有的浏览器上都能工作？

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.";
        }
    }

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.";
  }
}