I couldn't get transitions to work on div element(square), anybody has any idea why?-CodePudding

HTML

    <html>
    <head>
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
    </head>
    <body>
    <div >
     <div ></div>
    </div>
    </body>
    </html>

CSS With the following CSS rule:

   .container {
      display: grid;
      grid-template-columns: repeat(10, 40px);
      grid-template-rows: repeat(10, 40px);
      column-gap: 10px;
      row-gap: 10px;
    }
    .square {
      grid-row: 5 / 8;
      grid-column: 4 / 8;
      transition: all 5s ease;
    }
    .square:hover {
      grid-row: 2 / 6;
      grid-column: 2 / 6;
    }

The code is not working, the square div is changing grid-row and grid-column but there is no transition effect, while grid change.

CodePudding user response：

The problem is, that grid-row and grid-column are not animatable.

On mdn web docs is a list of animatable CSS properties.