mlp layout code ദ്ദി(｡•̀ ,<)~✩‧₊

<!-- (c)  mane six trotting across screen created by honey_bunnii3 -->

<style>

@keyframes trotting-twilight{

  from{ left:-400px; }

  to{ left:2110px; }

}

#twilight{

  position: fixed;

  left: -400px;

  bottom: 1px;

  width: 130px;

  animation: trotting-twilight 6s infinite linear;

  pointer-events: none;

}

</style>

<img id="twilight" src="https://64.media.tumblr.com/bad41a8c7b1f0aefbe6f5e45f4ac448e/b76add75f2dff84b-94/s100x200/925ba71e94d17eff4e88f188f695ff7263ae319d.gifv"/>

<style>

@keyframes hopping-pinkie{

  from{ left:-520px; }

  to{ left:1990px; }

}

#pinkie{

  position: fixed;

  left: -400px;

  bottom: 1px;

  width: 130px;

  animation: hopping-pinkie 6s infinite linear;

  pointer-events: none;

}

</style>

<img id="pinkie" src="https://64.media.tumblr.com/332dc6557666b2c301ac95b347858914/b76add75f2dff84b-1d/s250x400/2d52fb12ae284f358ed87bb258b2aaf023086a9f.gifv"/>

<style>

@keyframes trotting-apple{

  from{ left:-640px; }

  to{ left:1870px; }

}

#apple{

  position: fixed;

  left: -400px;

  bottom: 1px;

  width: 115px;

  animation: trotting-apple 6s infinite linear;

  pointer-events: none;

}

</style>

<img id="apple" src="https://64.media.tumblr.com/fda06e12b6a300749bcf837b490671c0/b76add75f2dff84b-88/s100x200/38c18ff5d382327995f19f23b5d148cb96656274.gifv"/>

<style>

@keyframes flying-rainbow{

  from{ left:-760px; }

  to{ left:1750px; }

}

#rainbow{

  position: fixed;

  left: -400px;

  bottom: 30px;

  width: 130px;

  animation: flying-rainbow 6s infinite linear;

  pointer-events: none;

}

</style>

<img id="rainbow" src="https://64.media.tumblr.com/cccf135e9566f7d7d5c31ee5ec74a7f0/b76add75f2dff84b-08/s100x200/59d714a1891b31d05f6fd0f6207ee4eac7a4a6a0.gifv"/>

<style>

@keyframes trotting-rarity{

  from{ left:-890px; }

  to{ left:1630px; }

}

#rarity{

  position: fixed;

  left: -400px;

  bottom: 1px;

  width: 130px;

  animation: trotting-rarity 6s infinite linear;

  pointer-events: none;

}

</style>

<img id="rarity" src="https://64.media.tumblr.com/919bc266670663bca076f4acf3eaaa60/b76add75f2dff84b-68/s100x200/a51fe41d703e7883ee80952fdd59bf29702fa5e4.gifv"/>

<style>

@keyframes trotting-flutter{

  from{ left:-1030px; }

  to{ left:1500px; }

}

#flutters{

  position: fixed;

  left: -400px;

  bottom: 1px;

  width: 130px;

  animation: trotting-flutter 6s infinite linear;

  pointer-events: none;

}

</style>

<img id="flutters" src="https://64.media.tumblr.com/eba1ce6a56afe4edd0a57d00a5dcfd67/b76add75f2dff84b-bd/s250x400/1b4cd8ce749d00a3719e0e5c26c805598c67f555.gifv"/>