How to fix background animation inside div?

Question

css

Changing the background image inside a div doesn't work. And it is in a specific div'e. If you reduce the width and height, then it works. What can be wrong?

.bgpic {
  background-image:url(2.png);
    background-repeat: no-repeat;
    box-shadow: black 1px 1px 1px;
    height: 55em;
  width: 100%;
  background-size: cover;
}
.bgpic:after {
    content: '';
  height: 55em;
  transition: opacity .5s ease-in;
  position: absolute;
  left: 0; top: 0;
  background:url(4.jpg);
  animation: foo 10s infinite;
}
@keyframes bgpic {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

Answer 1

https://jsfiddle.net/e87axpzb/9/