animation transition not fading?

Question

Sorry I am having a little trouble with knowing what to do in the correct order for a transition with animating changing background. I'm sure I can use a no-webkit black-background in a transition-animation added to the current one but have tried a few things and even opacity on black images but to no avail. CSS only please, no javascript or webkits extras or bootstraps if possible etc thanks.

.container {
  height: 1000px;
  width: 100%;
  background-image: url('../img/card1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
    
    transition: 5s;
    
    animation-name: animate;
    animation-direction: forwards;
    animation-duration: 60s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.8, 0, 0, 0.8);        
}


@keyframes animate {
       
/* removed extras to 100% for ease or reading */
   
    5% {background-image: url(../img/card1.jpg);}
    
            
    14% {background-image: url(../img/card2.jpg);}
}