CODEWITHSUNDEEP
csscss-animations
MistaPrime
MistaPrime

Reputation: 1677

CSS Animation only works in Chrome and not in IE Edge

This CSS only animates in Chrome but not in IE Edge: https://codepen.io/Tester2929/pen/RwapXrp

It seems it has to do something with this:

@keyframes animate {
  from {left: -100px;}
  to {left: 100%;}
    0%{
        transform: translateY(-250px) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-250px) rotate(0deg);
        opacity: 0.5;
        border-radius: 50%;
    }

}

Can anyone tell why it fails in IE Edge?

Upvotes: 0

Views: 51

Answers (3)

MistaPrime
MistaPrime

Reputation: 1677

I found a solution, it seems this works: https://codepen.io/Tester2929/pen/vYGxoRe

It looks like IE Edge was not reading the

  from {left: -100px;}
  to {left: 100%;}

and I changed translateY into translateX since I wanted the animation to go form left to right.

Upvotes: 1

Ali Asgher Badshah
Ali Asgher Badshah

Reputation: 851

add the following script to your code and try again may it will work

Download edge.js

Download edgeActions.js

Download edgePreload.js

<script type="text/javascript" charset="utf-8" src="edge.js"></script>
<script type="text/javascript" charset="utf-8" src="edgeActions.js"></script>
<script type="text/javascript" charset="utf-8" src="edgePreload.js"></script>

Upvotes: 0

Ali Asgher Badshah
Ali Asgher Badshah

Reputation: 851

Hi man your CSS does not work because some old browser does not recognize advance css so that you have to implement the webkit prefix to it just like below

@-webkit-keyframes animate {
 from {left: -100px;}
 to {left: 100%;}
 0%{
    -webkit-transform: translateY(-250px) rotate(0deg);
            transform: translateY(-250px) rotate(0deg);
    opacity: 1;
    border-radius: 0;
}

100%{
    -webkit-transform: translateY(-250px) rotate(0deg);
            transform: translateY(-250px) rotate(0deg);
    opacity: 0.5;
    border-radius: 50%;
}

}
@keyframes animate {
 from {left: -100px;}
 to {left: 100%;}
 0%{
    -webkit-transform: translateY(-250px) rotate(0deg);
            transform: translateY(-250px) rotate(0deg);
    opacity: 1;
    border-radius: 0;
}

100%{
    -webkit-transform: translateY(-250px) rotate(0deg);
            transform: translateY(-250px) rotate(0deg);
    opacity: 0.5;
    border-radius: 50%;
}

}

this is the same css as your just the difference is it has webkit prefix in it so that the browser can apply your styling

Upvotes: 0

Related Questions