CSS3 opacity transition not working in Safari

Question

I've got a super-simple CSS3 transition: just an image that fades out.

It works in all browsers except Safari (tested on Safari 8.0.7). What am I missing?

Here is the fiddle: https://jsfiddle.net/nerdess/9Lambqan/

Here is the code:

 .fade { background: url(https://placeimg.com/200/100) no-repeat; width: 200px; height: 100px; animation-duration: 3s; animation-iteration-count: 1; animation-name: fadeOut; animation-timing-function: ease-in; animation-fill-mode: forwards; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-name: fadeOut; -webkit-animation-timing-function: ease-in; -webkit-animation-fill-mode: forwards; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } 

 <div class="fade"></div> 

(I know that there are various stackoverflow posts aleady dealing with this topic but none had an answer that helped me!)

Answer 1

Use -webkit-keyframes

 .fade { background: url(https://placeimg.com/200/100) no-repeat; width: 200px; height: 100px; animation-duration: 3s; animation-iteration-count: 1; animation-name: fadeOut; animation-timing-function: ease-in; animation-fill-mode: forwards; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: 1; -webkit-animation-name: fadeOut; -webkit-animation-timing-function: ease-in; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } 

 <div class="fade"></div> 

Take a look at this css-tricks page to view all compatibility as possible.

https://css-tricks.com/snippets/css/keyframe-animation-syntax/