title: Javascript and css animation
body: <p>How can I make an animation? When I press a button like Monday, the object with the correct color will move down, and if it is not the button pressed like &quot;Tuesday&quot; the previous object will move up and the correct object will move down. Thank you in advance</p>
  <p>Here is the example of code..</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction(myColor) {
    const square_day = document.getElementById("square")
    switch (myColor) {
      case "Monday":
        square_day.style.borderColor = "#ff7f98";
        square_day.style.backgroundColor = "#ff7f9880";
        square_day.style.animation = "square-to-circle 1s .83s"
        break
      case "Tuesday":
        square_day.style.borderColor = "#d7d77b";
        square_day.style.backgroundColor = "#d7d77b80";
        square_day.style.animation = "square-to-circle 1s .83s"
        break
    }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#square {
    height: 500px;
    width: 500px;
    position: relative;
    border-style: solid;
    border: 10px solid;
    background-color: grey;
    margin-left: auto;
    margin-right: auto;
    border-color: black;
    top: -700px;
  }
  
  @keyframes square-to-circle {
    0% {
      top: -700px
    }
    100% {
      top: 0px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div id="button-container"&gt;
      &lt;div class="button-group"&gt;
        &lt;button class="button" id="Monday" value="Monday" onclick="myFunction(this.value)"&gt;Monday&lt;/button&gt;
        &lt;button class="button" id="Tuesday" value="Tuesday" onclick="myFunction(this.value)"&gt;Tuesday&lt;/button&gt;
        &lt;button class="button" id="Wednesday" value="Wednesday" onclick="myFunction(this.value)"&gt;Wednesday&lt;/button&gt;
        &lt;button class="button" id="Thursday" value="Thursday" onclick="myFunction(this.value)"&gt;Thursday&lt;/button&gt;
        &lt;button class="button" id="Friday" value="Friday" onclick="myFunction(this.value)"&gt;Friday&lt;/button&gt;
        &lt;button class="button" id="Saturday" value="Saturday" onclick="myFunction(this.value)"&gt;Saturday&lt;/button&gt;
        &lt;button class="button" id="Sunday" value="Sunday" onclick="myFunction(this.value)"&gt;Sunday&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="square-container"&gt;
      &lt;div id="square"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>