all：unset导致奇怪的行为;破坏动画

Question

为什么带有unset的{​​{3}}会导致动画无法对元素起作用，而

this code在没有代码的情况下效果很好：all: unset？

（这是调试的噩梦）

非链接版本：

＆＃13;

＆＃13;

document.getElementById("mybutton").addEventListener("click", myflashgreen);

function myflashgreen() {

  document.getElementById("quizreminderarea").className += " flashgreen";
  document.getElementById("quizreminder").className += " flashgreen";

  setTimeout(function() {
    document.getElementById("quizreminderarea").classList.remove("flashgreen");
    document.getElementById("quizreminder").classList.remove("flashgreen");

  }, 410);

}

＆＃13;

#quizreminder {
  all: initial;
  * {
    all: unset;
  }
}

.flashgreen {
  -webkit-animation-name: flashgreen;
  -webkit-animation-duration: 0.3s;
  animation-name: flashgreen;
  animation-duration: 0.3s;
}

@-webkit-keyframes flashgreen {
  from {
    background: #48ff00;
  }
  to {
    background: default;
  }
}

@keyframes flashgreen {
  from {
    background: #48ff00;
  }
  to {
    background: default;
  }
}

#div {
  width: 150px;
}

#quizreminder {
  left: 74%;
  height: 12em;
  background: white;
  color: black;
  position: fixed;
}

#quizreminderarea {
  width: 5000px;
  height: 12em;
  background: white;
  color: black;
  position: fixed;
}

＆＃13;

<button id="mybutton">
      click me
    </button>

<div id="quizreminderarea"><textarea id="quizreminder" class=""></textarea></div>

＆＃13;

＆＃13;

＆＃13;

删除第一个css块将导致所需的结果，而离开它将导致textarea完全阻止动画，迫使它到后台