css - 为什么我的 CSS 动画在 Safari 中不起作用

Question

更新 I found the answer.

我有一个 SVG，我正在使用 CSS 关键帧制作动画。

<a class="bolster-banner" href="http://example.com" target="_blank">
    <svg width="283" height="30" viewBox="0 0 283 30" xmlns="http://www.w3.org/2000/svg"><title>Met trots gemaakt door Bolster</title><g fill="none"><path d="M209.468 9.864s5.452.947 5.913 2.342c.444 1.395-3.396 5.337-3.396 5.337s.775 5.471-.415 6.339c-1.189.846-6.153-1.573-6.153-1.573s-4.962 2.419-6.155 1.573c-1.189-.869-.401-6.339-.401-6.339s-3.837-3.942-3.41-5.337c.465-1.396 5.914-2.342 5.914-2.342s2.573-4.864 4.053-4.864c1.447 0 4.052 4.864 4.052 4.864z" fill="#000" class="bolster-banner-star" id="bolster-banner-star" /><path d="M234.144 15.4c.944-.336 1.504-1.376 1.504-2.384 0-1.776-1.376-2.896-3.728-2.896h-5.376v10.88h5.696c2.432 0 3.888-1.216 3.888-3.024 0-1.168-.656-2.288-1.984-2.576zm-4.896-3.072h2.24c1.04 0 1.584.368 1.584 1.056 0 .704-.56 1.168-1.584 1.168h-2.24v-2.224zm0 6.432v-2.144h2.688c.992 0 1.552.336 1.552 1.008 0 .64-.496 1.136-1.616 1.136h-2.624zm12.192-5.696c-2.464 0-4.224 1.712-4.224 4.048 0 2.368 1.76 4.128 4.224 4.128 2.448 0 4.192-1.76 4.192-4.128 0-2.336-1.744-4.048-4.192-4.048zm0 5.936c-1.072 0-1.76-.832-1.76-1.872 0-1.008.688-1.824 1.76-1.824 1.04 0 1.744.816 1.744 1.824 0 1.04-.704 1.872-1.744 1.872zm8.224-9.36h-2.608v11.36h2.608v-11.36zm1.232 8.688c.16 2.064 1.808 2.912 3.824 2.912 2.032 0 3.648-.832 3.648-2.624 0-1.376-.976-2.08-2.432-2.352l-1.44-.24c-.624-.112-.816-.352-.816-.608 0-.304.32-.56.976-.56.72 0 1.264.272 1.312.864h2.32c-.128-2.048-1.984-2.688-3.632-2.688-2.064 0-3.472.96-3.472 2.592 0 1.36.944 2.112 2.288 2.336l1.568.272c.512.08.752.288.752.544 0 .336-.432.544-1.12.544-.8 0-1.36-.304-1.472-.976l-2.304-.016zm14.8.336c-.576.112-1.008.192-1.376.192-.768 0-1.216-.384-1.216-1.168v-2.224h2.64v-2.224h-2.64v-2.64h-2.592v2.64h-1.52v2.224h1.52v2.304c0 2.096 1.248 3.472 3.12 3.472.768 0 1.344-.064 2.352-.384l-.288-2.192zm9.328-1.712c0-2.336-1.712-3.888-3.952-3.888-2.496 0-4.144 1.696-4.144 4.048 0 2.368 1.696 4.064 4.24 4.064 1.92 0 3.408-1.008 3.792-2.608h-2.576c-.224.352-.64.56-1.184.56-.992 0-1.536-.544-1.744-1.248h5.52c.048-.304.048-.624.048-.928zm-3.968-1.888c.832 0 1.392.448 1.536 1.296h-3.152c.192-.784.736-1.296 1.616-1.296zm10.672-1.952c-1.152 0-1.984.368-2.672.96v-.832h-2.608v7.76h2.608v-4.448c.608-.592 1.408-.928 2.672-.976v-2.464z" fill="#333" /><path d="M12.208 10.12h-1.136l-4.288 7.056-4.288-7.056h-1.12v10.88h1.536l-.032-7.552 3.424 5.616h.976l3.392-5.568v7.504h1.536v-10.88zm9.792 7.072c-.016-2.256-1.536-3.856-3.648-3.856-2.336 0-3.92 1.712-3.92 3.936 0 2.208 1.584 3.92 3.92 3.92 1.68 0 3.024-.848 3.456-2.176h-1.584c-.304.576-.944.928-1.824.928-1.456 0-2.304-.944-2.512-2.112h6.048v-.016l.032.016c.032-.208.032-.432.032-.64zm-3.712-2.592c1.264 0 2.08.848 2.224 2.128h-4.624c.192-1.2 1.04-2.128 2.4-2.128zm10.72 5.088c-.384.112-.848.192-1.248.192-1.024 0-1.552-.496-1.552-1.664v-3.456h2.8v-1.232h-2.8v-2.752h-1.472v2.752h-1.84v1.232h1.84v3.456c0 1.936 1.008 3.024 2.752 3.024.576 0 .992-.064 1.744-.288l-.224-1.264zm11.28 0c-.384.112-.848.192-1.248.192-1.024 0-1.552-.496-1.552-1.664v-3.456h2.8v-1.232h-2.8v-2.752h-1.472v2.752h-1.84v1.232h1.84v3.456c0 1.936 1.008 3.024 2.752 3.024.576 0 .992-.064 1.744-.288l-.224-1.264zm3.52-6.16h-1.472v7.472h1.472v-4.784c.672-.928 1.616-1.44 2.816-1.472v-1.392c-1.168 0-2.128.48-2.816 1.28v-1.104zm8.096-.192c-2.272 0-3.984 1.68-3.984 3.936 0 2.256 1.712 3.968 3.984 3.968 2.24 0 3.968-1.712 3.968-3.968 0-2.256-1.728-3.936-3.968-3.936zm0 6.56c-1.472 0-2.512-1.168-2.512-2.624 0-1.44 1.04-2.592 2.512-2.592 1.44 0 2.48 1.152 2.48 2.592 0 1.456-1.04 2.624-2.48 2.624zm10.976-.208c-.384.112-.848.192-1.248.192-1.024 0-1.552-.496-1.552-1.664v-3.456h2.8v-1.232h-2.8v-2.752h-1.472v2.752h-1.84v1.232h1.84v3.456c0 1.936 1.008 3.024 2.752 3.024.576 0 .992-.064 1.744-.288l-.224-1.264zm1.536-1.12c.208 1.888 1.648 2.672 3.472 2.672 1.872 0 3.232-.864 3.232-2.4 0-1.424-1.136-1.92-2.24-2.112l-1.44-.24c-.928-.16-1.264-.544-1.264-1.008 0-.592.592-1.024 1.632-1.024s1.792.416 1.904 1.296l1.36-.016c-.16-1.872-1.872-2.432-3.28-2.432-1.824 0-3.072.88-3.072 2.304 0 1.328 1.04 1.888 2.224 2.08l1.664.288c.672.112 1.104.448 1.104.976 0 .672-.72 1.088-1.776 1.088-1.232 0-1.952-.496-2.144-1.456l-1.376-.016zm20.496-5.04h-1.472v.592c-.672-.56-1.552-.88-2.56-.88-2.112 0-3.76 1.648-3.76 3.872 0 2.032 1.648 3.76 3.76 3.76 1.008 0 1.888-.32 2.56-.864v1.104c0 1.504-.944 2.384-2.304 2.384-1.248 0-2.096-.656-2.272-1.616h-1.488c.224 1.744 1.744 2.944 3.76 2.944 2.224 0 3.776-1.424 3.776-3.712v-7.584zm-3.824 6.08c-1.456 0-2.496-1.232-2.496-2.496 0-1.472 1.04-2.592 2.496-2.592.912 0 1.76.368 2.352 1.232v2.608c-.592.864-1.44 1.248-2.352 1.248zm13.504-2.416c-.016-2.256-1.536-3.856-3.648-3.856-2.336 0-3.92 1.712-3.92 3.936 0 2.208 1.584 3.92 3.92 3.92 1.68 0 3.024-.848 3.456-2.176h-1.584c-.304.576-.944.928-1.824.928-1.456 0-2.304-.944-2.512-2.112h6.048v-.016l.032.016c.032-.208.032-.432.032-.64zm-3.712-2.592c1.264 0 2.08.848 2.224 2.128h-4.624c.192-1.2 1.04-2.128 2.4-2.128zm14.88-1.312c-1.264 0-2.112.432-2.896 1.248-.56-.8-1.456-1.248-2.512-1.248-1.024 0-1.68.336-2.24.912v-.672h-1.472v7.472h1.472v-5.184c.56-.816 1.264-1.2 1.952-1.2 1.248 0 1.984.816 1.984 2.24v4.144h1.472v-4.224c0-.32-.032-.64-.096-.928.576-.88 1.312-1.232 2.048-1.232 1.248 0 1.984.816 1.984 2.24v4.144h1.456v-4.224c0-2.128-1.344-3.488-3.152-3.488zm12.8.24h-1.472v.656c-.64-.528-1.504-.848-2.496-.848-2.112 0-3.808 1.744-3.808 3.936 0 2.176 1.696 3.92 3.808 3.92.992 0 1.856-.32 2.496-.848v.656h1.472v-7.472zm-3.76 6.384c-1.456 0-2.544-1.232-2.544-2.64 0-1.44 1.088-2.656 2.544-2.656.896 0 1.712.352 2.288 1.2v2.896c-.576.848-1.392 1.2-2.288 1.2zm13.6-6.384h-1.472v.656c-.64-.528-1.504-.848-2.496-.848-2.112 0-3.808 1.744-3.808 3.936 0 2.176 1.696 3.92 3.808 3.92.992 0 1.856-.32 2.496-.848v.656h1.472v-7.472zm-3.76 6.384c-1.456 0-2.544-1.232-2.544-2.64 0-1.44 1.088-2.656 2.544-2.656.896 0 1.712.352 2.288 1.2v2.896c-.576.848-1.392 1.2-2.288 1.2zm9.184-2.24l2.768 3.328h1.904l-3.632-4.352 3.12-3.12h-1.872l-3.744 3.664v-7.552h-1.472v11.36h1.472v-1.872l1.456-1.456zm11.072 2.016c-.384.112-.848.192-1.248.192-1.024 0-1.552-.496-1.552-1.664v-3.456h2.8v-1.232h-2.8v-2.752h-1.472v2.752h-1.84v1.232h1.84v3.456c0 1.936 1.008 3.024 2.752 3.024.576 0 .992-.064 1.744-.288l-.224-1.264zm13.728-10.048h-1.472v4.544c-.64-.544-1.504-.848-2.496-.848-2.112 0-3.808 1.744-3.808 3.92s1.696 3.92 3.808 3.92c.992 0 1.856-.304 2.496-.848v.672h1.472v-11.36zm-3.76 10.272c-1.456 0-2.544-1.232-2.544-2.656 0-1.424 1.088-2.64 2.544-2.64.896 0 1.712.352 2.288 1.2v2.896c-.576.832-1.392 1.2-2.288 1.2zm9.808-6.576c-2.272 0-3.984 1.68-3.984 3.936 0 2.256 1.712 3.968 3.984 3.968 2.24 0 3.968-1.712 3.968-3.968 0-2.256-1.728-3.936-3.968-3.936zm0 6.56c-1.472 0-2.512-1.168-2.512-2.624 0-1.44 1.04-2.592 2.512-2.592 1.44 0 2.48 1.152 2.48 2.592 0 1.456-1.04 2.624-2.48 2.624zm9.632-6.56c-2.272 0-3.984 1.68-3.984 3.936 0 2.256 1.712 3.968 3.984 3.968 2.24 0 3.968-1.712 3.968-3.968 0-2.256-1.728-3.936-3.968-3.936zm0 6.56c-1.472 0-2.512-1.168-2.512-2.624 0-1.44 1.04-2.592 2.512-2.592 1.44 0 2.48 1.152 2.48 2.592 0 1.456-1.04 2.624-2.48 2.624zm7.488-6.368h-1.472v7.472h1.472v-4.784c.672-.928 1.616-1.44 2.816-1.472v-1.392c-1.168 0-2.128.48-2.816 1.28v-1.104z" fill="#333" /></g></svg>
</a>

.bolster-banner{
  display: inline-block;
  max-width: 80%;
  svg{
    display: inline-block;
    opacity: .4;
    transition: opacity .2s linear;
  }
  path.bolster-banner-star{
    fill: #000;
    transform: rotate(0deg) scale(1);
    transform-origin:205px 15px 0;
    animation: none;
  }
  &:hover{
    svg{
      opacity: 1;
      path.bolster-banner-star{
        animation:
          spin 20s infinite linear;
      }
    }
  }
  &-home{
    padding: 50px 0 100px;
    text-align: center;
  }
  &-article{
    padding: 100px 0 170px;
    text-align: center;
  }
}

@keyframes spin {
  0% {
    fill: #00A894;
    transform: rotate(0deg) scale(1.3);
  }
  5%{
    fill: #0083C4;
  }
  10%{
    fill: #D059B2;
  }
  15% {
    fill: #5D54A4;
  }
  20%{
    fill: #FFBC32;
  }
  25% {
    fill: #00A894;
  }
  30%{
    fill: #0083C4;
  }
  35%{
    fill: #D059B2;
  }
  40%{
    fill: #5D54A4;
  }
  45%{
    fill: #FFBC32;
  }
  50% {
    fill: #00A894;
  }
  55%{
    fill: #0083C4;
  }
  60%{
    fill: #D059B2;
  }
  65%{
    fill: #5D54A4;
  }
  70%{
    fill: #FFBC32;
  }
  75% {
    fill: #00A894;
  }
  80%{
    fill: #0083C4;
  }
  85%{
    fill: #D059B2;
  }
  90%{
    fill: #5D54A4;
  }
  95%{
    fill: #FFBC32;
  }
  100% {
    fill: #00A894;
    transform: rotate(360deg) scale(1.3);
  }
}

-> https://jsfiddle.net/h38soz2u/

当我在 Chrome 或 Firefox 中查看它时，动画按预期工作:悬停时星星旋转并循环显示多种颜色。我正在为星星的 fill 制作动画。

但是在 Safari (9.1.1) 中，星星会旋转但不会显示颜色。

我尝试了不同的值顺序，我还尝试将星星的旋转和颜色的循环分成两个 @keyframe 集。

目前无法在 Safari 中为 fill 设置动画吗？

Answer 1

因为没有此前缀 -webkit- 的 safari 不支持动画。

像这样在你的 CSS 中添加这个前缀，代码就可以工作了。

.bolster-banner{
  display: inline-block;
  max-width: 80%;
  svg{
    display: inline-block;
    opacity: .4;
    transition: opacity .2s linear;
    -webkit-transition: opacity .2s linear;
  }
  path.bolster-banner-star{
    fill: #000;
    transform: rotate(0deg) scale(1);
    transform-origin:205px 15px 0;
    -webkit-transform: rotate(0deg) scale(1);
    -webkit-transform-origin:205px 15px 0;
    animation: none;
    -webkit-animation: none;
  }
  &:hover{
    svg{
      opacity: 1;
      path.bolster-banner-star{
        animation:
          spin 20s infinite linear;
      }
    }
  }
  &-home{
    padding: 50px 0 100px;
    text-align: center;
  }
  &-article{
    padding: 100px 0 170px;
    text-align: center;
  }
}

@keyframes spin {
  0% {
    fill: #00A894;
    transform: rotate(0deg) scale(1.3);
    -webkit-transform: rotate(0deg) scale(1.3);
  }
  5%{
    fill: #0083C4;
  }
  10%{
    fill: #D059B2;
  }
  15% {
    fill: #5D54A4;
  }
  20%{
    fill: #FFBC32;
  }
  25% {
    fill: #00A894;
  }
  30%{
    fill: #0083C4;
  }
  35%{
    fill: #D059B2;
  }
  40%{
    fill: #5D54A4;
  }
  45%{
    fill: #FFBC32;
  }
  50% {
    fill: #00A894;
  }
  55%{
    fill: #0083C4;
  }
  60%{
    fill: #D059B2;
  }
  65%{
    fill: #5D54A4;
  }
  70%{
    fill: #FFBC32;
  }
  75% {
    fill: #00A894;
  }
  80%{
    fill: #0083C4;
  }
  85%{
    fill: #D059B2;
  }
  90%{
    fill: #5D54A4;
  }
  95%{
    fill: #FFBC32;
  }
  100% {
    fill: #00A894;
    transform: rotate(360deg) scale(1.3);
    -webkit-transform: rotate(360deg) scale(1.3);
  }
}


@-webkit-keyframes spin {
  0% {
    fill: #00A894;
    transform: rotate(0deg) scale(1.3);
    -webkit-transform: rotate(0deg) scale(1.3);
  }
  5%{
    fill: #0083C4;
  }
  10%{
    fill: #D059B2;
  }
  15% {
    fill: #5D54A4;
  }
  20%{
    fill: #FFBC32;
  }
  25% {
    fill: #00A894;
  }
  30%{
    fill: #0083C4;
  }
  35%{
    fill: #D059B2;
  }
  40%{
    fill: #5D54A4;
  }
  45%{
    fill: #FFBC32;
  }
  50% {
    fill: #00A894;
  }
  55%{
    fill: #0083C4;
  }
  60%{
    fill: #D059B2;
  }
  65%{
    fill: #5D54A4;
  }
  70%{
    fill: #FFBC32;
  }
  75% {
    fill: #00A894;
  }
  80%{
    fill: #0083C4;
  }
  85%{
    fill: #D059B2;
  }
  90%{
    fill: #5D54A4;
  }
  95%{
    fill: #FFBC32;
  }
  100% {
    fill: #00A894;
    transform: rotate(360deg) scale(1.3);
    -webkit-transform: rotate(360deg) scale(1.3);
  }
}