1

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.

3

2 Answers 2

3

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.

0
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.