I have three sets of forms on the same page and only one form shown at a time. Forms can be navigated through each of the form's next step button. I would like to integrate a sliding animation/transition to the forms like the following.

I would like a solution using either CSS or jQuery. I tried an approach using CSS but it did not work.

Sample Animation
[![enter image description here](https://i.stack.imgur.com/LoCxh.gif)](https://i.stack.imgur.com/LoCxh.gif)

[JS Fiddle](https://jsfiddle.net/w18szet5/1/)

```js
$(document).ready(function() {
  $(".form-set form:not(:first-child)").each(function(e) {
    if (e != 0)
      $(this).hide();
  });

  $(".next").click(function() {
    if ($(".form-set form:visible").next().length != 0)
      $(".form-set form:visible").next().show().prev().hide();
    else {
      $(".form-set form:visible").hide();
      $(".form-set form:first").show();
    }
    return false;
  });
});
```

```html
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="form-set">
        <form>
          <h4>
            Form Set 1
          </h4>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary next">Next Step</button>
        </form>

        <form style="display:none">
          <h4>
            Form Set 2
          </h4>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary next">Next Step</button>
        </form>

        <form style="display:none">
          <h4>
            Form Set 3
          </h4>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary next">Next Step</button>
        </form>
      </div>
    </div>
  </div>
</div>
```