#maison-translation,
#maison-rotation,
#maison-echelle {
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 10px 110px;
}

#maison-translation {
  animation-name: translation;
}
@keyframes translation {
  from {transform: translate(0,0);}
  to   {transform: translate(100px,-100px);}
}

#maison-rotation {
  animation-name: rotation;
}
@keyframes rotation {
  from {transform: rotate(0);}
  to   {transform: rotate(-90deg);}
}

#maison-echelle {
  animation-name: echelle;
}
@keyframes echelle {
  from {transform: scale(0);}
  to   {transform: scale(2);}
}

#maison-translation-rotation,
#maison-rotation-translation {
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#maison-translation-rotation {
  transform-origin: 110px 190px;
  animation-name: translation-rotation;
}
@keyframes translation-rotation {
  0%,
  20%  {transform: translate(0,0)    rotate(0);}
  40%,
  60%  {transform: translate(0,0)    rotate(-45deg);}
  80%,
  100% {transform: translate(90px,0) rotate(-45deg);}
}

#maison-rotation-translation {
  transform-origin: 300px 190px;
  animation-name: rotation-translation;
}
@keyframes rotation-translation {
  0%,
  20%  {transform: rotate(0)      translate(0,0);}
  40%,
  60%  {transform: rotate(0)      translate(90px,0);}
  80%,
  100% {transform: rotate(-45deg) translate(90px,0);}
}