CSS-переход No jQuery;Показать затем Скрыть

Question

Я построил карточную игру, в которой после нажатия кнопки на дисплее будет отображаться «Правильно!»или "Неверно!"Я хотел бы, чтобы дисплей мигал, а затем исчезал через пару секунд, но не переставлял содержимое под ним, в данном случае это #winStreak и #longestStreak.Я не хочу использовать jQuery.Я пытался добавить переходы в CSS, но это не сработало.

HTML:

<p id="displayResult"></p>
<p id="winStreak"></p>
<p id="longestStreak"></p>

CSS:

#displayResult {
  margin-bottom: 1rem;
  transition: 2s ease-in-out;
}

JavaScript:

let foldButton = document.getElementById("foldBTN")
foldButton.addEventListener("click", function(){
  if (!table[position].includes(completeHand) && !table[position].includes(completeHand2)) {
    document.getElementById("displayResult").innerHTML = "Correct!";

Answer 1

Полагаю, вы можете использовать CSS animation:

var result = document.getElementById('displayResult');

result.addEventListener('animationend', function() {
  result.classList.remove('flashit');
});

let foldButton = document.getElementById('foldBTN');
foldButton.addEventListener('click', function() {
  result.innerHTML = 'Correct!';
  result.classList.add('flashit');
});

#displayResult {
  font-size:3rem;
  height: 1.3em;
  margin-bottom: 1rem;
  opacity: 0;
}

#displayResult.flashit {
  animation: flashit 3s;
}

@keyframes flashit {
  5% {opacity:.5}
  10% {opacity:1}
  15% {opacity:.2}
  20% {opacity:1}
  40% {opacity:1}
  100% {opacity:0}
}

<div id="displayResult"></div>
<button id="foldBTN">CLICK ME</button>