css - always defines standard rule 'keyframe' when defining keyframe Error

Question

css - always defines standard rule 'keyframe' when defining keyframe Error

Navigation

#1 by (1 votes)

1

I'm getting error in the code below that says

css - always defines standard rule 'keyframe' when defining keyframe Error

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

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

css css3 navegador keyframes webkit

asked by anonymous 11.12.2018 / 12:46

1 answer

ASP.Net - JavaScript / Text GZip File Compression How to obtain the size means of a grouping with Pandas?

score 1 · Accepted Answer

Your problem is that you are declaring the animation just for the vendor prefix -webkit- that Chrome understands most IE does not.

Animation running in IE11

TocorrectyoujustaddthesameCSSbutwithouttheprefix@keyframesfadeIn{}

Seethatitwillworktherenowwithouterror,thisisthecodereferringtotheimageabove

.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

In this question you have details that will interest you Is it necessary to add prefixes in some CSS properties?