Media queries not work in Firefox, when has animation-CodePudding

When the screen width is less than 640px, the background is covered, why is the height not covered? And, It's work in Chrome and Edge.

.change{
  background: #f00;
  height: 100px;
  animation: test1 1s linear forwards;
}

@keyframes test1 {
  0% {
    height: 100px;
  }
  
  100% {
    height: 400px;
  }
}

@media only screen and (max-width: 640px) {
  .change{
    background: #0f0;
  }
  
  
  @keyframes test1 {
    0% {
      height: 100px;
    }

    100% {
      height: 200px;
    }
  }
}

jsfiddle

CodePudding user response：

Looking at how the site behaves on Chrome, Firefox, and Safari, it seems that Chrome might be the only browser who deviate by attempting to reanimate the <div> after @media conditions are changed. Firefox and Safari thought that the animation is finished and no longer needed to reanimated.

As a workaround, you can force all web browsers to reanimate this by re-setting the .change animation properties under the @media scope and changing their values by a bit, such as by animating for 1.000001 seconds instead of 1.

.change{
  background: #f00;
  align-items: center;
  font-family: sans-serif;
  color: #fff;
  height: 100px;
  display: flex;
  justify-content: center;
  animation: test1 1s linear forwards;
}

@keyframes test1 {
  0% {
    height: 100px;
  }
  
  100% {
    height: 400px;
  }
}

@media only screen and (max-width: 640px) {
  .change{
    background: #0f0;
    color: #00f;
    animation: test1 1.000001s linear forwards;
  }
  
  
  @keyframes test1 {
    0% {
      height: 100px;
    }

    100% {
      height: 200px;
    }
  }
}

<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0' name='viewport' />
    <body>
      <div >Some content</div>
    </body>
</html>