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


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