html, body, .container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color:#fafafa;
}

.container { position: relative; }

.spacer {
  height: 50vw;
  background-color: #efefef;
}

.info {
  position: fixed;
  right: 0;
  top: 0;
  padding: 1em;
}

.object-one {
  display: inline-block;
  padding: 2em;
  background-color: aqua;
  text-align: center;
  height: 8em;
  width: 8em;
  transition: background-color 1s ease;
}

.object-one.element-out { background-color: red; }

.object-one.element-in { background-color: aqua; }

.object-two {
  display: inline-block;
  background-color: red;
  padding: 2em;
  text-align: center;
  height: 10vw;
  width: 10vw;
  transition: opacity 1s ease;
}

.object-two.element-out { opacity: 0; }

.object-two.element-in { opacity: 1; }

.object-three {
  display: inline-block;
  background-color: red;
  padding: 2em;
  text-align: center;
  height: 8em;
  width: 8em;
  transition: transform 1s ease;
}

.object-three.element-out { transform: translateX(-400px); }

.object-three.element-in { transform: translateX(0); }