CSS transition animation frame

Question

How is it possible to make this transition in css the last transition of this gif: https://cdn.dribbble.com/users/757683/screenshots/4317968/dribbble_spec_1_v4.gif

The last one, I put a image here:

Start showing pyramid gradually, and slide it to right releasing the login details on the left.

Answer 1

You can do something like:

1. The whole parent div shall be bigger than 100vw e.g: 120vw.

2. The body shall have overflow-x: hidden,

3. The img should be 100vw while the sign-in part a bit smaller eg: 20vw,

4. The parent div should be translated in such a way that the img is only visible at the beginning, then we would animate the parent div to be translated to show the sign-in part as well.

Enough of theory, understand from the code below:

* {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
}

.parent_container {
  display: flex;
  width: 120vw;
  animation: anime 2s;
}

@keyframes anime {
  0% {
    transform: translate(-20vw);
  }
  100% {
    transform: translate(0);
  }
}

.sign_in_eg {
  height: 100vh;
  width: 20vw;
  background: red;
}

.img_eg {
  height: 100vh;
  width: 100vw;
  background: blue;
}

<div class="parent_container">
  <div class="sign_in_eg">This is for signin</div>
  <div class="img_eg">This is for image</div>
</div>