CSS Animation doesn't work on older Safari Browser - html

Question

I'm not very familiar with css nor css animations. I have made a fade-in animation for some pictures. They do work great, but not on an old Safari browser.
A friend of mine uses Safari 5.1.10 and the pictures don't get displayed.
What can I do that it will play the animation or how can I tell the browser "if you're too old for that stuff then just ignore the animation and display the pictures"?
And here is the 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

This is because you need to add vendor prefixes to the animation attributes because in older versions they're considered 'experimental'. Check out the support for Animations on Can I Use? Safari 5.1 requires the -webkit- prefix.
You code should work when changed to the following:
.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;
}
}
The opacity attribute is okay and has pretty good support and that does not have a prefix to add. There are other vendor prefixes for other browsers too as you've used already, but you'll be fine with just the webkit prefix for the animation ones (keep the prefixed keyframe prefixes though).