Animation of keyframes is not displayed. Works only in Chrome

@-webkit-keyframes slide { 0%, 100% { background-image: url("../img/bg1.jpg"); } 33% { background-image: url("../img/bg2.jpg"); } 66% { background-image: url("../img/bg3.jpg"); } } @-moz-keyframes slide { 0%, 100% { background-image: url("../img/bg1.jpg"); } 33% { background-image: url("../img/bg2.jpg"); } 66% { background-image: url("../img/bg3.jpg"); } } @-o-keyframes slide { 0%, 100% { background-image: url("../img/bg1.jpg"); } 33% { background-image: url("../img/bg2.jpg"); } 66% { background-image: url("../img/bg3.jpg"); } } @keyframes slide { 0%, 100% { background-image: url("../img/bg1.jpg"); } 33% { background-image: url("../img/bg2.jpg"); } 66% { background-image: url("../img/bg3.jpg"); } } @media -sass-debug-info{filename{font- family:file\:\/\/D\:\/Projects\/Work\/Vegetables2\/css\/sass\/main\.sass}line{font-family:\0000333}} .banner { display: table; width: 100%; margin: 0 auto; text-align: center; height: 100vh; color: rgba(255, 255, 255, 0.9); } @media -sass-debug-info{filename{font- family:file\:\/\/D\:\/Projects\/Work\/Vegetables2\/css\/sass\/main\.sass}line{font-family:\0000340}} .banner:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(118, 144, 164, 0.4); z-index: 0; } @media -sass-debug-info{filename{font-family:file\:\/\/D\:\/Projects\/Work\/Vegetables2\/css\/sass\/main\.sass}line{font-family:\0000349}} .v-center { display: table-cell; vertical-align: middle; position: relative; z-index: 4; padding: 0 5%; } @media -sass-debug-info{filename{font-family:file\:\/\/D\:\/Projects\/Work\/Vegetables2\/css\/sass\/main\.sass}line{font-family:\0000355}} .banner-bg { display: table; height: 100%; width: 100%; background: #222; background-size: cover; background-repeat: no-repeat; background-position: 50%; top: 0; position: absolute; z-index: 0; animation: slide ease-in-out 30s both infinite; -webkit-animation: slide ease-in-out 30s both infinite inline-block; -moz-animation: slide ease-in-out 30s both infinite inline-block; -o-animation: slide ease-in-out 30s both infinite inline-block; } /*# sourceMappingURL=main.css.map */