I'm trying to append a new div with slide effect using css. I found a way that works using keyframe.

I'm trying to avoid using keyframe because I don't quite understand that yet and want to achieve this with a simpler way.

Also, I want to position my new div next to other div, not the button but I'm having problem as well.

How could I do this?

```js
$('div:first-child').click(function() {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
  } else {
    $(this).addClass('active');
  }
});

$('button').click(function() {
  $('body').append('<div class="slide">7</div>');
});
```

```css
div {
  display: inline-block;
}
button {
  position: relative;
}
.active {
  font-size: 25px;
}
div:nth-child(2):active {
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -webkit-transition: -webkit-transform 2s;
  transform: rotate(360deg);
  transition: transform 2s;
}
.slide {
  position: absolute;
  animation-duration: 3s;
  animation-name: slidein;
}
@keyframes slidein {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</body>
<button>button</button>
```