Skip to content

transition-duration not working when used with Boostrap .form-control

I’m developing a Sign In registration box in HTML, CSS, and JS using Bootstrap.

I made a simple animation where, on the click of the button, the middle input field slide on the left with the input fields on top and bottom goes down and up, like a closing and opening effect.

With plain HTML and no Bootstrap classes imported everything works fine. As soon as I add the class form-control to the input field the transition-duration: 0.5s; in the CSS code seems not working anymore.

My code

const menuBtn = document.querySelector('.button');
const repeatInput = document.querySelector('.new_pss');
const repeatInput_1 = document.querySelector('.user');
const repeatInput_2 = document.querySelector('.new_pss_rpt');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if(!menuOpen) {
    menuOpen = true;
  } else {
    document.getElementsByClassName('new_pss_rpt')[0].placeholder='Repeat Password';
    menuOpen = false;
body {
  height: 100%;
body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
  margin-top: 10px;
  transition-duration: 0.5s;
} {
  transform: translateX(-300px);
  opacity: 0%;
  padding: 2px;
  transform: translateY(13px);
  transform: translateY(-13px);
<!-- CSS only -->
<link rel="stylesheet" href="" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<body class="text-center">
  <form class="form-signin">
    <div class="input">
      <input type="text" class="user form-control" placeholder="Username"></input>
    <div class="input">
      <input type="text" class="new_pss form-control" placeholder="Password"></input>
    <div class="input">
      <input type="text" class="new_pss_rpt form-control" placeholder="Repeat Password"></input>
    <div class="btn">
      <button type='button' class="button">Sign In Test</button>

The live code is available also here

Am I missing something?


You set a duration, but you didn’t tell it what to animate. So, you need to add transition-property: transform; too. To animate everything you set, you could set it to all, but only transform is needed so that works. Or for short, you could replace the entire thing with just transition: all 0.5s;. (