Keyframe not working in IE10+11?

[ReGGaeBOSS]

For some reason a small keyframe animation don’t want to work in IE 10+ and I can’t figure out why.

I use autoprefixer and this is my autoprefixed CSS:

.line {
  display: block;
  margin: auto;
  margin-top: 30px;
  height: 1px;
  width: 100px;
  background: #fff;
  opacity: 0;
  -webkit-animation: fade 1s forwards;
          animation: fade 1s forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s; }

@-webkit-keyframes fade {
  0% {
    opacity: 0;
    -webkit-transform: translatey(20px);
            transform: translatey(20px); }

  100% {
    opacity: 1;
    -webkit-transform: translatey(0);
            transform: translatey(0); } }

@keyframes fade {
  0% {
    opacity: 0;
    -webkit-transform: translatey(20px);
            transform: translatey(20px); }

  100% {
    opacity: 1;
    -webkit-transform: translatey(0);
            transform: translatey(0); } }

I can’t see anything in this CSS that would make it not work, do u?

You know anything else that could interfere with keyframes in IE?

SIte that it isnt working on is: website and its the h1’s in the banners on the sub-pages and the home-page slider.

EDIT: css transitions doesnt seem to work either.

[DaveMaxwell]

Did you resolve this? My IE11 is displaying the same thing as Chrome.

Never mind - I see what you’re talking about…

[RyanReese]

You aren’t applying that keyframe animation anywhere. How can you expect it to work?

[PaulOB]

You have this meta tag in place which means you get ie9.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">

Use edge instead.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

The animation will work ok now.

[ReGGaeBOSS]

Thanks dude!