Let’s practice transitions of css property values.
For div.box element, the following changes should occur on hover:

  • width should be 400px, transition delay 1s, duration - 4s;
  • height should be 400px, transition delay is 2s, duration - 4s;
  • the corners should become 50% rounded, transition delay 2s, duration - 4s;
  • background color should be #861657, transition delay should not be, duration should be 4s.
    Use separate properties to add transitions; the order is the same as in the list above.

This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Transitions</title>
    <style>
      body {
          display: grid;
          place-items: center;
      }
      .box {
          width: 200px;
          height: 200px;
          border-radius: 8px;
          background-color: #DDFFF7;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>