<p class="based">Based on <a href="https://dribbble.com/yadav" target="_blank">Deepak</a> UI work.</p>

<form action="" class="form">

    <input id="noaccount" name="radioaccount" type="radio" class="radio radio--invisible" checked />
    <input id="account" name="radioaccount" type="radio" class="radio radio--invisible"/>
    <div class="form_background">
      <div class="form-group form-group--account">
        <h3 class="form-group_title">Log in</h3>
        <input class="form-group_input" type="email" placeholder="Email"/>
        <input class="form-group_input" type="password" placeholder="Password"/>
        <button class="button button--form">Log in</button>
      </div>
      <div class="form-group form-group--noaccount">
        <h3 class="form-group_title">Sign up</h3>
        <input class="form-group_input" type="text" placeholder="Full Name"/>
        <input class="form-group_input" type="email" placeholder="Email"/>
        <input class="form-group_input" type="password" placeholder="Password"/>
        <button class="button button--form">Sign up</button>
      </div>
    </div>

  <fieldset class="fieldset">
    <h2>Don't have an account ?</h2>
    <p>Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever street art fap.</p>
    <div class="form_content form_content--noaccount">
      
    </div>
    <label for="noaccount" class="button">Signup</label>
  </fieldset>
  <fieldset class="fieldset">
    <h2>Have an account ?</h2>
    <p>Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever street art fap.</p>
    
    <div class="form_content form_content--noaccount">
      
    </div>
    <label for="account" class="button">login</label>
  </fieldset>
</form>

// based on https://dribbble.com/shots/2311260-Day-1-Sign-Up-and-Login-Animated-Download-Template

$form-color : #E57B5C;

* {
  box-sizing: border-box;
}
body {
  background: url('https://i.imgsafe.org/7b90603.png') no-repeat 50% 15%;
  background-size: 150%;
  color: #fff;
  font-family: Helvetica;
}

h2 {
  font-size: 2rem;
  font-weight: normal;
}
.based {
  margin: 1rem;
  a {
    color: #fff;
    font-weight: bold;
  }
}
.form {
  max-width:860px;
  margin: 6rem auto 0 auto;
  display: flex;
  flex-direction: row;
  padding: 4rem;
  background: rgba(0, 0, 0, .6);
  border-radius: .2rem;
  position:relative;
} 

.form_content {
  margin-bottom: 1rem;
}

.form-group {
  color: #333;
  opacity: 0;
}
  .form-group_title {
    color: $form-color;
    text-transform: uppercase;
  }



  .form-group_input {
    width: 100%;
    border-width: 0 0 2px 0;
    border-bottom: 2px solid #ccc;
    padding: .5rem;
    margin-bottom: 1.5rem;
  }

.form_background {
  border-radius: .2rem;
  background-color: #fff;
  padding: 3rem 2rem;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, .4);
  width: 50%;
  height: 120%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transition: all .3s cubic-bezier(0.04, 0.57, 0.15, 1.46);
}

.fieldset {
    flex: 1;
    margin: 0;
    border: 0;
    padding: 0 5rem 0 0;
    &:first-child {
      padding-left: 0;
    }
    &:last-child {
      padding-left: 5rem;
      padding-right: 0;
    }
  }

.radio--invisible {
  opacity: 0;
  height: 0;
  width: 0;
}

.button {
  text-transform: uppercase;
  padding: .6rem 3rem;
  border: 1px solid #fff;
  border-radius: .3rem;
  cursor: pointer;
  transition: background .2s ease-in;
  display: inline-block;
  margin-top: 1rem;
  &:hover {
    background-color: rgba(0, 0, 0, .3);
  }
  &--form {
    background: $form-color;
    color: #fff;
    float: right;
    margin-top: 0;
    &:hover {
      background: lighten($form-color, 10%);
    }
  }
}

#noaccount:checked {
  ~ .form_background {
    transform: translate(3rem, -50%);
    .form-group--account {
      display: none;
    }
    .form-group--noaccount {
      display: block;
      opacity: 0;
      animation-delay: .2s;
      animation-duration: .3s;
      animation-name: slidein;
      animation-fill-mode: forwards;
    }
  }
}

#account:checked {
  ~ .form_background {
    transform: translate(calc(100% - 3rem), -50%);
    .form-group--noaccount {
      display: none;
    }
    .form-group--account {
      display: block;
      animation-delay: .2s;
      animation-duration: .3s;
      animation-name: slidein;
      animation-fill-mode: forwards;
    }
  }
}

@keyframes slidein {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
View Compiled
//no js

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.