Transitions not working on inputs

I’m trying to add some transitions to my inputs, but it doesn’t seem to work and no matter how hard i try I’m unable to find what’s causing the problem, Please help.

HTML:

 <label for="name" id="name-label" class="qh">Name:</label>
      <input type="text" id="name" placeholder="Full Name" required> <br>

      <label for="email" id="email-label" class="qh">Email:</label>
      <input type="email" id="email" placeholder="Your Email Address" required>

CSS:`

input[type=text], input[type=email]{
  padding: 5px 10px;
  text-align: center;
  font-family: 'Concert One', cursive;
  border-radius: 9px;
  box-sizing: border-box;
  outline: none;
  transition: width 1s ease-in-out;
}
  
input[type=text]:focus, input[type=email]:focus
{
  width: 250px;
}

`

run: https://jsfiddle.net/bg9nxudw/

I think that for many transition to work, the browser needs to know the starting and the end point, unless the starting can be inferred (like opacity).

Try giving an initial width (eg: 150px), the transition should then work :slight_smile:

1 Like

it worked well! Thanks!