CODEWITHSUNDEEP
htmlcss
Thomas Spade
Thomas Spade

Reputation: 744

CSS Animation Not Working in Internet Explorer

I am trying to create a header animation where it starts out at 5% width and increases to 100% width. I also need it to move from left: 45%; to left: 0%; I've been able to accomplish exactly what I need in Chrome and FireFox, but it doesn't work in Internet Explorer.

Here's my CSS:

@keyframes header-build {
    from {width: 5%;}
    to {width: 100%;}
    from {left: 45%;}
    to {left: 0%;}
}

 header{
    width: 5%;
    min-width: 5%;
    left: 45%;
 }

.action{
    animation-name: header-build;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: 1s;

    -webkit-animation-name: header-build;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: 1s;


    -moz-animation-name: header-build;
    -moz-animation-duration: 1s;
    -moz-animation-fill-mode: both;
    -moz-animation-delay: 1s;

    -o-animation-name: header-build;
    -o-animation-duration: 1s;
    -o-animation-fill-mode: both;
    -o-animation-delay: 1s;
}

The class "action" is added to the header on page load via js.

This works in all browsers except for IE, but even in IE it moves from 45% to 0%, the width just doesn't change.

Is there a prefix I'm missing or an alternate way of animating the width in Internet Explorer?

Thanks.

EDIT: I'm using Internet Explorer 11.

Upvotes: 1

Views: 2267

Answers (2)

jbutler483
jbutler483

Reputation: 24559

You're issue is with your keyframe declaration, as you cannot declare to and from multiple times in your keyframes.

Instead, place all your to properties in a single {}, separated by a semicolon, (as you would with 'normal' CSS):

@keyframes header-build {
    from {
           width: 5%;
           left: 45%;
         }
    to   {
           width: 100%;
           left: 0%;
         }

If you needed 'extra' breakpoints/ positions as well, rather than using from and to, you would use 0% and 100%, with possibly a 50%, for example.

As a side note

Your unprefixed version of your animation should always be placed after the prefixed versions, and not before.

Upvotes: 0

ylerjen
ylerjen

Reputation: 4249

Replace the animation

@keyframes header-build {
    from {width: 5%;}
    to {width: 100%;}
    from {left: 45%;}
    to {left: 0%;}
}

with

@keyframes header-build { 
    from {width: 5%;left: 45%;}
    to {left: 0%;width: 100%;}
}

As from is equivalent to 0% and to to 100%, you should declare 1 time each and group your properties that should be animated in it.

Upvotes: 3

Related Questions