Smoothly changing images animation

HTML

<div>
    
</div>

CSS

div
{
    width: 300px;
    height: 300px;
    -webkit-animation: fading 3s infinite;
    animation: fading 3s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    font-family:siteFont;
}

@-webkit-keyframes fading {
0%   { background-image: url('https://www.google.co.in/logos/doodles/2013/holiday-series-2013-2-5173241802915840-hp.png'); }
100% {background-image: url('http://www.google.co.in/images/srpr/logo4w.png');}
}


@-webkit-keyframes fading {
  0% {
    background-image: url("https://www.google.ca/testFading0");
  }
  
  100% {
    background-image: url("https://www.google.ca/testFading100");
  }
}