CSS 动画不适用于旧版 Safari 浏览器

Question

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

我的一个朋友使用的是Safari 5.1.10，图片无法显示。

我该怎么做才能播放动画或我如何告诉浏览器"if you're too old for that stuff then just ignore the animation and display the pictures"？

这里是 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;
    }
}

Answer 1

这是因为您需要为动画属性添加供应商前缀，因为在旧版本中它们被视为 'experimental'。查看 support for Animations 我可以使用吗？ 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;
    }
}

opacity 属性没问题，有很好的支持，没有要添加的前缀。正如您已经使用的那样，其他浏览器也有其他供应商前缀，但是您只需要动画浏览器的 webkit 前缀就可以了（保持前缀 keyframe 前缀 ).

CSS 动画不适用于旧版 Safari 浏览器

CSS Animation doesn't work on older Safari Browser

html

css

animation

cross-browser