CSS Change Time with JavaScript

I'm not very good at javascript but the solution is simple and to be done with CSS using transition .

function togglePopup1() {
    document.getElementById('desktop-card').style.width = '480px';
}

#desktop-card {
  width: 100px; /* tamanho inicial */
  height: 50px; 
  background: #ddd; /* Cor para demonstrar o efeito  */
  transition: 2s; /* Class transition */
  -moz-transition: 2s; /* Firefox 4 */
  -webkit-transition: 2s; /* Safari and Chrome */
  -o-transition: 2s; /* Opera */
}

<button onclick="togglePopup1()">Start</button>
<div id="desktop-card"><div>

Assuming you have the style class ready for desktop-card , you only have to add the transition properties in that class and when you change the style in JS it will receive the transition according to what you set up:

function togglePopup1() {
    document.getElementById('desktop-card').style.width = '480px';
}

#desktop-card{
  background-color: black;
  color: white;
  width: 100px;
  transition-delay: 2s;
  transition-duration: 2s;
}

<button onclick="togglePopup1()">Aperte Aqui</button>

<div id="desktop-card">Teste</div>

Note: I have used two properties transition , transition-delay which specifies the time for the animation to start and the transition-duration that specifies the animation duration time.

There are other properties you can use. Here you can read and see more examples.

Vitor, vllw mano.

I got it here, in the early morning I was so sleepy I did not even remember what I could use with CSS.

However, it did not work for example

document.getElementById('desktop-card').style.display = 'block';

In case the Div # desktop-card appears smooth too.