Html CSS动画没有'；不能在较旧的Safari浏览器上工作

我不太熟悉css或css动画。我为一些图片制作了淡入动画。它们确实工作得很好，但在旧的Safari浏览器上就不行了

---

我的一位朋友使用Safari 5.1.10，但图片无法显示

我该怎么做才能让它播放动画呢？或我该如何告诉浏览器“如果你太老了，不能播放这些东西，那么就忽略动画并显示图片”

下面是css：

 .column-image > div picture > img{
  opacity: 0;
  animation-name: fadein;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

#c1163 > div > div:nth-child(2) > div picture > img{
    animation-delay: 0.5s;
}

#c1163 > div > div:nth-child(6) > div picture > img{
    animation-delay: 1s;
}

#c1163 > div > div:nth-child(7) > div picture > img{
    animation-delay: 1.5s;
}


#c1163 > div > div:nth-child(11) > div picture > img{
    animation-delay: 2s;
}


#c1163 > div > div:nth-child(12) > div picture > img{
    animation-delay: 2.5s;
}

 @keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

---

这是因为您需要将供应商前缀添加到动画属性中，因为在旧版本中，它们被视为“实验性的”。检查一下我能用什么？Safari 5.1需要-webkit-前缀

当更改为以下内容时，您的代码应该可以工作：

.column-image > div picture > img{
  opacity: 0;
  animation-name: fadein;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  -webkit-animation-name: fadein;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}

#c1163 > div > div:nth-child(2) > div picture > img{
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

#c1163 > div > div:nth-child(6) > div picture > img{
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

#c1163 > div > div:nth-child(7) > div picture > img{
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}


#c1163 > div > div:nth-child(11) > div picture > img{
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}


#c1163 > div > div:nth-child(12) > div picture > img{
    animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

---

该属性还可以，并且具有相当好的支持，并且没有前缀可添加。其他浏览器也有其他厂商的前缀，正如您已经使用过的那样，但是对于动画浏览器，您可以只使用webkit前缀（但保留前缀keyframe前缀）。

“我的一个朋友使用Safari 5.1.10”-告诉他们停止。它于2010年发布。它没有安全更新。它不支持在现代网络上使用的很多东西。是的，我已经支持了：）