CSS animations don't work in Internet Explorer

Question

I have an HTML/CSS webpage. This pages background change pictures continuously. It works in Chrome, but not in Internet Explorer — background image stays the same. I would like to point out that it will not display for you properly because the images are not included.

HTML/CSS:

<!doctype html>
<html>
<title>Macht IT Solutions</title>
<head>
    <style>
        #body1 {
            position: relative;
            background-Color: white;
            font-color: white;
            width: 1000px;
            margin: 0 auto;
            z-index: -1;
        }

        #body2 {

            position: absolute;
            top: 140px;
            font-color: white;
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            z-index: 0;
        }

        #background {
            opacity: 0.8;
            position: absolute;
            top: 0px;
            background-image: url("back.jpg");
            font-color: white;
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            z-index: 1;
            -webkit-animation-name: bodyback;
            -webkit-animation-duration: 30s;
            -webkit-animation-iteration-count: infinite;
            animation-name: bodyback;
            animation-duration: 30s;
            animation-delay: 5s;
            -webkit-animation-delay: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
        }

        #logo {
            border: 1px solid black;
            background-color: black;
            color: white;
            padding: 5px;
            border-radius: 5px 0px 5px 0px;
            background-image: url("networking.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            height: 130px;
        }

        #about {
            position: absolute;
            top: 10px;
            color: black;
            border: 1px solid blue;
            background-color: white;
            border-radius: 5px 0px 5px 5px;
            padding: 4px;
            width: 500px;
            z-index: 2;
        }

        #aboutmetext {
            position: absolute;
            top: 100px;
            background-color: white;
            color: black;
            float: left;
            width: 500px;
            border: 1px solid blue;
            padding: 4px;
            border-radius: 5px 30px 20px 20px;
            z-index: 2;
        }

        #video {
            position: absolute;
            top: 30px;
            left: 550px;
            border: 1px solid blue;
            background-color: white;
            float: right;
            overflow: hidden;
            border-radius: 10px 10px 0px 0px;
            height: 360px;
            z-index: 2;
        }

        #serv {
            position: absolute;
            top: 400px;
            float: left;
            width: 500px;
            border: 1px solid blue;
            padding: 4px;
            border-radius: 5px 30px 20px 20px;
            color: black;
            background-color: white;
            z-index: 2;
        }

        #services {
            position: absolute;
            top: 300px;
            font-color: black;
            float: left;
            height: 30px;
            border: 1px solid blue;
            padding: 4px;
            background-color: white;
            border-radius: 5px 0px 5px 0px;
            color: black;
            width: 500px;
            z-index: 2;
        }

        #contactus {
            position: absolute;
            top: 550px;
            float: left;
            height: 30px;
            border: 1px solid blue;
            padding: 4px;
            background-color: white;
            border-radius: 5px 0px 5px 0px;
            color: black;
            z-index: 2;
        }

        #contact {
            position: absolute;
            top: 650px;
            float: left;
            width: 500px;
            border: 1px solid blue;
            padding: 4px;
            border-radius: 5px 30px 20px 20px;
            color: black;
            background-color: white;
            z-index: 2;
        }

        @KeyFrames bodyback {
            0% {
                background-image: url("back.jpg");
            }
            25% {
                background-image: url("net1.jpg");
            }
            50% {
                background-image: url("net2.jpg");
            }
            100% {
                background-image: url("net3.jpg");
            }
        }

        @-webkit-keyframes bodyback {
            0% {
                background-image: url("back.jpg");
            }
            25% {
                background-image: url("net1.jpg");
            }
            50% {
                background-image: url("net2.jpg");
            }
            100% {
                background-image: url("net3.jpg");
            }
        }

        @KeyFrames {
        }

        @KeyFrames {
        }

        @KeyFrames {
        }
    </style>
</head>
<body id="body1">
<div id="logo" style="font-size:30px">
    <img src="machtlogo1.png" height="100" width="100"> Macht IT Solutions
</div>
<div id="body2">
    <div id="background"></div>
    <h1 id="about">About us</h1>

    <div>
        <p id="aboutmetext">
            <font>
            </font>
        </p>

        <div id="video">
            <p align="center">
                <font color="black">
                    <b>
                        What is the Internet?
                    </b>
                </font>
            </p>
            <iframe width="420" height="315" src="https://www.youtube.com/embed/Jj6EHgSsx_U?autoplay=0">
            </iframe>
        </div>
    </div>
    <div>
        <h1 id="services"><font color="black">Services</font></h1>
    </div>
    <div id="serv">
        <p>
            <font color="black">
                inquiry.
            </font>
        </p>
    </div>
    <div>
        <h1 id="contactus"><font color="black">Contact us</font></h1>
    </div>
    <div id="contact">
        <p>
            <font color="black">
            </font>
        </p>
    </div>
</div>
</body>
</html>

Keyframes don't work with background images. See this question: http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations — Katrina, May 21 '15 at 18:07
[Please don't use `` tags, they are obsolete and horrible to maintain.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font) — misterManSam, May 22 '15 at 00:12

Sampson · Answer 1 · 2015-05-22T00:10:38.900

The background-image property is not animatable, according to the CSS Transitions specification.

You should not expect this to work in any browser at the time of this writing. This may change in the future though as implementations are experimented with, and standards bodies continue to advance support for new and creative features.

If you want to swap out background images in the interim, you should do so with script, or by animating the position/size of individual background images on a single element, rather than attempting to animate the background itself.

score -2 · Answer 2 · answered May 21 '15 at 18:05

-2

You are using -webkit-animation-name , which is only supported in Google Chrome.

Try using -ms-animation-name.

answered May 21 '15 at 18:05

Rubenxfd

434
1
5
19

1

Since 10, Internet Explorer has supported `animation-name` unprefixed. – Sampson May 21 '15 at 23:35

CSS animations don't work in Internet Explorer

2 Answers2