How can I create a blink transition effect from one colour to another in a timeout function?-CodePudding

I am creating an application that trains my memory by memorising colours. Every 2 seconds, the colour of the box will change from one to another. However if it switches to the same colour, it becomes difficult to differentiate. I am hoping to implement a blink effect when it transits to another colour. I tried to use blink animation by adjusting the time but it does not work well. How can i implement with my current code?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      *{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      }

      #count {
        font-size: 36px;
      }

      .section__hero {
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 50px;
        position: relative;
      }

      #countdownTimer {
        position: absolute;
        font-size: 72px;
        left: 50%;
        top: 50%;
        transform:translate(-50%,-50%)
      }

      .section__btns {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px
      }

      #count,
      #element,
      #btn__answer,
      #countdownTimer {
        visibility: hidden;
      }

      #element {
        height: 100px;
        width: 100px;
        background-color: #000;
        border: 1px solid black;
      }

      #btn__action,
      #btn__answer {
        padding: 15px 30px;
        border: none;
        font-size: 18px;
        color: #fff;
        border-radius: 8px;
        cursor: pointer;
        /* display: block; */
      }

      #btn__action {
        background-color: #332cf2;
      }

      #btn__answer {
        background-color: #000;
        text-decoration: none;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div >
        <div id="countdownTimer"></div>
        <div id="count"></div>
        <div id="element"></div>
      <div >
        <button id="btn__action" onclick="action()">Start</button>
        <a href="answer.html" id="btn__answer"">Answer</a>
      </div> 
    </div>
  </body>
  <script>
    const colors = ["#000", "#fff", "#ffff00", "#ff0000"];
    const btnsSect = document.getElementsByClassName("section__btns");
    const recallSect = document.getElementsByClassName("section__recall");
    const verfiySect = document.getElementsByClassName("section__verify");
    const actionBtn = document.getElementById("btn__action");
    const answerBtn = document.getElementById("btn__answer");
    const element = document.getElementById("element");
    const count = document.getElementById("count");
    const countdownTimer = document.getElementById("countdownTimer");
    let interval;
    let answers = {};
    let nextState = "Start";
    let countdownValue = 4;
    let elementCount = 0;
    let isCountdown = false;

    function action() {
      switch (nextState) {
        case "Start":
          start();
          break;
        case "Stop":
          stop();
          break;
        case "Reset":
          reset();
          break;
      }
    }

    function start() {
       nextState = "Stop";
       actionBtn.innerHTML = nextState;
       actionBtn.style.visibility = "visible";
       element.style.visibility = "visible";
       count.style.visibility = "visible";
       changeElementColour();
       interval = setInterval(changeElementColour, 2000);
      interval = setInterval(changeElementColour, 2000);
    }

    function changeElementColour() {
      const newElement = colors[Math.floor(Math.random() * colors.length)];
      element.style.backgroundColor = newElement;
      answers[elementCount] = newElement
      elementCount  ;
      count.innerHTML = elementCount;
    }
  </script>
</html>

CodePudding user response：

Simply add a css animation that lets you render a transition between the inverse of the color that last the duration you want it to say 1/60 a second, and you may wish to apply additional details. You can trigger this to happen each time by simply changing toggling a temporary class to retrigger the animation.

CSS For Inverting the Color From W3Schools

       /* The animation code */
@keyframes example {
  from {filter: inverse(1);}
  to {filter: inverse(0);}
}
//make sure to add browser extensions for webkit
/* The element to apply the animation to */
div.class {
  animation-name: example;
  animation-duration: 0.3s;
  animation-timing-sequence: ease-in-out;
}

This code was modified from W3Schools and needs to be adjusted to meet your exact application's needs.

Simply Toggle off/on The Class this css is placed on using Javascript and the animation should replay

Also Jquery and Javascript both have great API's for handling Animation Events as well that you may play around with.

See CSS Animations Toggling Classes With JQuery Getting Animation Events With JQuery

CodePudding user response：

You can use animation:

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
#element{
 animation: blinker 2s cubic-bezier(0, 0, 0.9, -0.02) infinite;
}