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


.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;
    animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

.object-two {
  display: inline-block;
  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;
  text-align: center;
  height: 8em;
  width: 8em;
  transition: transform 1s ease; }
  .object-three.element-out {
    transform: translateX(-1500px); }
  .object-three.element-in {
    transform: translateX(0); 
}

@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1; } }