Change text and add transition to make it smooth

Question

I am working with a textbox that will change its content on button-press using a javascript function with document.getElementById().innerHTML and document.getElementById.style.

The problem: I dont seem to find a solution that can change the text and add transition smoothly. I dont know how to change both the text and animate the change in the same line/same time.

I am using @keyframes in css to animate the fade.

  document.getElementById("info-loc").innerHTML = name;
    document.getElementById("info-dev").innerHTML = age;
    document.getElementById("info-con").innerHTML = peak;
    document.getElementById("info-time").innerHTML = temp;

    var transition = "animation-name: fade; animation-duration: 1s;"
    document.getElementById("info-loc").style = transition;
    document.getElementById("info-dev").style = transition;
    document.getElementById("info-con").style = transition;
    document.getElementById("info-time").style = transition;

Answer 1

Firstly, set the input text's color as white and transition via css. Secondly, add a class with a different color so that you can see the text animating when clicked on the button.

Here is the working example:

 function insertText() { document.getElementById("text").value = "Animated Text..."; document.getElementById("text").classList.add("show"); }

 input.animation { transition: all 3s; color: #FFF; } input.show { color: #000; }

 <input type="text" class="animation" id="text"> <button onclick="insertText()">Insert Text</button>