CSS Transition a background-color from 50% to 100% on hover-CodePudding

I am trying to create a simple ease-in-out transition on hover where the background colour increases from 50% of the viewport to 100% of the viewport.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .container {
        height: 100vh;
        width: 50%;
        background-color: #999;
        transition: all 0.5s ease-in-out;
      }

      .container:hover{
        /* width: 100% */
        }

    </style>

  </head>
  <body>
    <div >
    </div>
  </body>
</html>

I have tried numerous combinations but cannot get a smooth transition. Is there a straight forward way to do this with a css transition or do I need to be looking towards using Javascript?

CodePudding user response：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .container {
        height: 100vh;
        width: 50%;
        background-color: #999;
        transition: all 0.70s ease-in-out;
      }

      .container:hover{
        width: 100%
        }

    </style>

  </head>
  <body>
    <div >
    </div>
  </body>
</html>

I think this is a smooth transition.