css - Always define standard Rule 'keyframe' when Defining keyframe Error

Question

I’m getting error in the code below that says

css - Always define standard Rule 'keyframe' when Defining keyframe Error

It runs normally on Chrome but is not working on IE 11

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}

Answer 1

Your problem is that you are declaring the animation only for the vendor prefix -webkit- that Chrome understands IE no more.

Animation running on IE11

To fix it just add the same CSS but without the prefix @keyframes fadeIn {}

See that it will work there now without error, this is the code referring to the image above

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: fadeIn 1s linear infinite;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}

    

<div class="box"></div>

---

Tip

There are details on that question that will interest you Prefixes need to be added to some CSS properties?