.square {
  margin: 20px;
  width: 150px;
  height: 150px;
  background: #d16;
  /*transform: translateX();*/
  position: relative;
  color: white;
  font-size: 1.2em;
  transition: opacity 2s, height 3s, left 3s, margin 3s;
}

div {
  left: 1em;
  margin-left: 0;
}

.right {
  margin-left: 300px;
}

#B {
  width: 100px;
  height: 100px;
  background: #cc0;
  animation: spin 2s linear 3;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.hide {
  height: 0; /*this will not take effect as #B has a higher specificity*/
  opacity: 0;
}