horse_run

horse_run.markdown

horse_run

A Pen by Paulina Khew on CodePen.

License.

index.html

<div><div class="container"><img src='data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53%0D%0AMy5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPjx0aXRsZT5ob3JzZTwvdGl0%0D%0AbGU+PHBhdGggZD0iTTg2OS4zNSw4MjQuNzdjNi4xOC0xLjkxLDEyLjMyLTQsMTguNTUtNS42OSwz%0D%0ALjctMSw0LjM4LTMuMjQsNC02LjY5LS44My02LjctNC43NS0xMS4zNy05LjkzLTE0LjkzYTExMS40%0D%0ANSwxMTEuNDUsMCwwLDAtMTUuOTMtOS4zLDY2LjEyLDY2LjEyLDAsMCwxLTI2LjkxLTIyLjQ5Yy04%0D%0ALjE2LTExLjc2LTE2LjE5LTIzLjYzLTIzLjY0LTM1Ljg0QTQyLjQsNDIuNCwwLDAsMSw4MTAsNzE0%0D%0ALjRjLTIuNDMtMTYuMTUtOS0zMC4zOC0xNy4yNC00NC4zMWE0MTAuMiw0MTAuMiwwLDAsMS0zNi40%0D%0AOS03OC42NWMtMi42Mi03Ljc3LTMuOTEtMTYtNS43NC0yNGE0LjI3LDQuMjcsMCwwLDEsLjQzLTEu%0D%0AOTNjNC44OS0xNS44NCwzLjg2LTMxLjkxLDItNDgtMS40NC0xMi43NC0zLjE0LTI1LjQ4LTQtMzgu%0D%0AMjYtLjktMTMuNDEsMy4xMi0yNi4wNiw4LjA2LTM4LjMxLDctMTcuMzcsMTIuMzktMzUuMSwxNC44%0D%0AMi01My43NS43Ni01Ljg3LDIuOTItMTEuNTgsNC43MS0xNy4yNy43My0yLjMzLDIuNDQtNC41Nyw1%0D%0ALjIxLTIuNDksMTEuNzEsOC43OCwyNi4wOSwxMS41NiwzOSwxNy41OSwxMSw1LjEzLDE5Ljg5LDEy%0D%0ALjQyLDI2LjQ2LDIyLjc5LDksMTQuMjIsMjQsMTUsMzQuODUsMiw4LjQ3LTEwLjExLDEwLjE5LTIx%0D%0ALjcxLDUuNzEtMzMuNzdhMTUyLjMxLDE1Mi4zMSwwLDAsMC0xMS40My0yMy4yMmMtNS42OS05Ljc4%0D%0ALTEyLTE5LjE4LTE4LjItMjguNjctMy41NC01LjQ0LTUuODMtMTEuMTctNS41Ni0xNy43OWEyNi40%0D%0AOSwyNi40OSwwLDAsMC02LjYyLTE4Ljg3Yy01LTUuODYtMTAuMjYtMTEuNjQtMTUuMTItMTcuNjMt%0D%0AMy41My00LjM2LTkuNjUtOS0xMS4zNi0xNC4zMy0xLTMuMTgtLjU0LTYuNjEtLjE5LTkuOTNhMTA2%0D%0ALjk0LDEwNi45NCwwLDAsMC0xLjc5LTMzLjE2LDMuNjUsMy42NSwwLDAsMC0xLjE5LTIuMzdjLTEu%0D%0AOS0xLjMxLTMuOTIsMS40Ny00LjY5LDMuNjVhNTUuMTEsNTUuMTEsMCwwLDEtMTEuNjEsMTkuMTVj%0D%0ALTIuNjgsMi44Ny01LjgsNS41My05LjU4LDYuNTgtMTUuMDcsNC4xOC0xNS42Ni0yNS0yMS4yLTMz%0D%0AYTEyNC4wOCwxMjQuMDgsMCwwLDAtMTIuNDIsMzEuMDZjLS42MywyLjQzLTEuMzMsNS0zLjA2LDYu%0D%0AODEtNy4wNyw3LjQzLTE5LjI4LjI1LTI4LjIzLDMuMjYtMy4xMiwxLTUuOTQsMi44NC05LDQuMTct%0D%0AMTUuNzYsNi45My0zNC42LjM1LTUxLDUuNjVDNjc5LjUsMjU1LDY5NCwyNjYuMTcsNzA3LDI2MC45%0D%0ANGMtOC41MywzLjQyLTE0LjYsNC40My0yNCwzLjIzLTguODMtMS4xMy0xOC4xMy0zLjI1LTI2Ljc5%0D%0ALDAsMi45My0xLjA4LDExLjA2LDMuNTUsMTMuOTMsNC41NmE4MS4yNSw4MS4yNSwwLDAsMCwxNC4w%0D%0ANiwzLjEyYy00LS42Ny04LjkyLjI4LTEzLjExLS4yMS03LjEtLjgzLTE0LjU1LTMuNTMtMjEuMzYt%0D%0ALjA3LTQsMi4wNi03LjI4LDUuMzktMTAuMzksOC43MSw1LjkxLS40MSwxMS44My4yMiwxNy43MS44%0D%0ANGwxMywxLjM5Yy00LjA2LS40My05LjgyLjczLTE0LjA5LjgxLTMuODcuMDctOC4zNy4wOC0xMS45%0D%0AMywxLjc0LTIuMzcsMS4xMS00LjI4LDMtNi40OSw0LjM4YTE3LjYyLDE3LjYyLDAsMCwxLTEyLjM1%0D%0ALDIuMzdjMS4yMywzLjcxLDUuOSw0Ljc0LDkuNzksNS4xNiw1LjUyLjYxLDExLjE1LjkxLDE2LjQ5%0D%0ALDIuMjksNSwxLjI4LDkuOTIsMy44OCwxNS4xOCwzLjUzLTEzLjIuODgtMzguNjUtOC42MS00Ni42%0D%0ANyw2LjgyLDguMjYuMDUsMTYuODMuMTcsMjQuMzEsMy42OC0xMS4zNC01LjMyLTIzLjQ1LDQuOTEt%0D%0AMzQuNjgsMi41N2EyNi4wNywyNi4wNywwLDAsMCw4LjA1LDMuNTljOC44OCwxLjcyLDE2LjM5LjY4%0D%0ALDI0LjY3LDUuNTItOS4xOS0uNzYtMTcuODksNC4zNS0yNy4wOSw0LjkyLTQuODkuMy0xMC4yNy0u%0D%0ANTgtMTQuMywyLjIsMy4xNy0xLjIzLDYuMTIsMiw5LjE2LDMuNTQsMy43OCwxLjksOC40NiwxLjE2%0D%0ALDEyLjI5LDMtNC42OC42NS05LjQ3LS41My0xNC4xNiwwLTQuNDguNDYtOC42LDIuNTQtMTMuMjEs%0D%0AMS40Nyw4LjE4LDEuOSwxOC4wNiwxMS42MywyNi44OCw3Ljg0LTQsMi04LjQyLDEuMzQtMTIuNzEs%0D%0AMS4yNi05LjI5LS4xNy05LjgsNS0xNC4yLDExLjM5YTcuNCw3LjQsMCwwLDEtNy4zNCwzLDI0Ljky%0D%0ALDI0LjkyLDAsMCwwLDE2LjkyLDEuMTFjMy43Ny0xLjE2LDYuNzUtNC42LDkuODkuMDksMyw0LjQ1%0D%0ALTIuNTUsOS4wOS00LjgzLDEyLjg5LTUuMzksOS0xMS43NCwxNy42Mi0yMi4zNSwyMC41Ni05LjYs%0D%0AMi42NS0xOC44Nyw2LjUzLTI4LjIxLDEwYTExNy43OSwxMTcuNzksMCwwLDEtNjkuNyw0LjQ3Yy0x%0D%0ANS4zOS0zLjU4LTMwLjkzLTYuNTUtNDYuNDgtOS4zNmE5NC43MSw5NC43MSwwLDAsMC01MC42OSw0%0D%0ALjM2Yy0yNC4xOCw5LTQ3LjUsMTcuOTQtNzAuMzUsMjkuODZhMTEuNDUsMTEuNDUsMCwwLDEtNS4x%0D%0AOCwxLjcyYy0yLjE2LDAtNC4wOS0xLjIxLTYtMi4xNS0xMi44LTYuMTMtMjguNjUtLjU2LTM4Ljk0%0D%0ALDkuMi0xMy4xNiwxMi40OC0xNiwzMC4zNi0yOS4xNSw0Mi41OGE5OC44Niw5OC44NiwwLDAsMS00%0D%0AOS43NywyNC45NSw1Ny44NSw1Ny44NSwwLDAsMCwzMi01LjQ1Yy0xMi40MywxNy0yNS45MSwyOC42%0D%0ANS00NiwzNi40NmE0MC41Myw0MC41MywwLDAsMCwyMC0uMDZBMTgzLjU3LDE4My41NywwLDAsMCwx%0D%0ANzIsNTU4LjU3Yy00LjU0LDIuODktMTguMiwxMS0yMy43Nyw4LjA2YTMzLDMzLDAsMCwwLDIyLjI1%0D%0ALDIuOTNjLTYuNjIsMS43OS0xMi42Nyw4LjExLTE4LjkzLDExLTYuODksMy4xNS0xNC44Niw1LjEz%0D%0ALTIyLjM0LDYuNTZBNDkuNDQsNDkuNDQsMCwwLDAsMTY3LDU4OS4xNWMtNy40NCwyLjY2LTE0LjA4%0D%0ALDExLTIxLjYxLDE0LjUzcy0xNC40MywzLjE4LTIyLjEsNC4zMmMzLjM4LDUuNjUsMTIuNjgsOC4y%0D%0ANSwxOC43OSw5LjM4YTg0LjQ0LDg0LjQ0LDAsMCwxLTQyLjUyLDcuODUsNzMuODQsNzMuODQsMCww%0D%0ALDAsNTQuNjUsNi41MiwzMS4wOCwzMS4wOCwwLDAsMS0xMi40NCwxMC4xYzcuNi0zLjM5LDE4Ljkx%0D%0ALTIuNjgsMjcuMi01LjM5LDYuODktMi4yNSwxNS43Ny01LjY3LDIxLjY0LTkuOTFhNTYuMzQsNTYu%0D%0AMzQsMCwwLDEtOC4zLDEzLjg4YzUxLjYxLTIwLjY0LDg5LjktNTguNTksMTEyLjQyLTEwOS42Niwx%0D%0ALjUyLTMuNDQsMy42MS02LjYyLDUuNDUtOS45MmwxLjQ0LjE1YzQuMTksMjEuNDEsOC42OSw0Mi43%0D%0ANiwxMi4zNiw2NC4yNiwxLDUuOTEsMCwxMi4zMS0uODgsMTguMzctMS40NiwxMC01LjY4LDE4Ljg4%0D%0ALTE1LjIsMjMuMzQtMTMuODYsNi40OS0xOC41MiwxNy44OS0xOC43OSwzMnMuMzQsMjgtLjQzLDQx%0D%0ALjk1Yy0uNTIsOS4zOC0yLjcxLDE4LjY4LTQuMjksMjhhMTAuMywxMC4zLDAsMCwxLTEuOSw0LjU5%0D%0AYy01LDYuMjItOC40LDEyLjg3LTgsMjEuMjIuMTksMy41My0yLjM1LDUuNC01Ljk0LDYuMjctNC4x%0D%0ANywxLTguNTcsMi4wOS0xMi4wOSw0LjM2LTIuNCwxLjU0LTQuNzMsNS4wOS00Ljg3LDcuODVhNTAu%0D%0ANDgsNTAuNDgsMCwwLDAsMS45LDE1Ljc0YzIuMzYsOC41MiwxMC41NSwxMi42MSwxOC40OCw4LjY2%0D%0ALDUuMTYtMi41Nyw5LjU2LTcsMTMuNjgtMTEuMjIsNi44My03LDEzLTE0LjYzLDE5Ljc1LTIxLjY2%0D%0ALDUuMzQtNS41Myw0LjgyLTExLjksNC4yMS0xOC42Ny0zLjMzLTM2Ljk0LDQuOTEtNjkuNjksMzQu%0D%0ANS05NC43M3ExMy0xMSwyNS4xNC0yMi44MmM3LjgzLTcuNiwxNy4wNy0xMi41OSwyNy0xNi42OGEx%0D%0AMy4yNiwxMy4yNiwwLDAsMCw1LTQuMTdjNi03Ljc0LDguMjYtMTYuOTEsMTAtMjYuMzQuODUtNC42%0D%0ANSwxLjI4LTkuNzEsNi44NC0xMy4yMyw1LjIzLDEwLjA5LDE1Ljk0LDEyLjYsMjQuNzksMTcuOTIs%0D%0ANy4zNSw0LjQyLDEyLjI3LDExLjE0LDEzLjY4LDE5LjQ4LDIsMTEuNjEsMy4xMiwyMy4zNyw0LjIx%0D%0ALDM1LjExLjYxLDYuNjIuNDQsMTMuMzEuNTUsMjAsLjE4LDExLDQuOTIsMTkuNjIsMTIuNjcsMjcu%0D%0AMjcsMTUsMTQuODUsMzAsMjkuNzcsNDQuMjIsNDUuNDEsNi4yOSw2LjkyLDEwLjU4LDE1LjY2LDE1%0D%0ALjgsMjMuNTUsMS45MywyLjkxLDMuODQsNS44NCw1Ljg5LDguNjdhMjEuNTgsMjEuNTgsMCwwLDAs%0D%0AMTQuNDIsOC45NWM5LjIyLDEuNjIsMTIuMzUsNi41OSwxMC40NywxNS42LTIuMTYsMTAuMzYsMSwx%0D%0ANi4zNywxMSwxOS43Nyw4LjIzLDIuODEsMTYuNjQsMy42MSwyNC44Ny0uMTEsNS4yMy0yLjM3LDUu%0D%0ANTMtMy42MSwzLjE5LTguNzMtMi00LjM5LTMuODQtOC44Ni01Ljc1LTEzLjI5LTMuMjktNy42NS03%0D%0ALjQ1LTE0LjQ3LTE1LjUxLTE4LjEzYTE0LjQ3LDE0LjQ3LDAsMCwxLTQuNzUtNC4zMWMtMTItMTQu%0D%0AOTItMjMuOTUtMjkuODItMzUuNjktNDQuOTEtNi40NC04LjI3LTEyLjU2LTE2Ljc5LTE4LjU2LTI1%0D%0ALjM4LTYuMTEtOC43NS04LjM2LTE4Ljc2LTguNTEtMjkuMy0uMjctMTguNjUtLjU4LTM3LjMtLjcz%0D%0ALTU1Ljk0LDAtNC42Mi40OS05LjIzLjg0LTE1LjMyLDguNzgsMS40LDE3LDIuMjQsMjUsNC4wOCwx%0D%0AMi40OCwyLjg4LDI0LjcsNi45MiwzNy4yMSw5LjYsMTguMzIsMy45MiwzNi40Ny40Myw1NC41NC0y%0D%0ALjcyLDE1LjcxLTIuNzQsMzEuNDEtNS41NSw0NS41OC04LjA2LDksMTQuMDgsMTcuMzUsMjYuODgs%0D%0AMjUuNTQsMzkuNzYsNi43OSwxMC42OCwxMy42LDIxLjM3LDE2LjEyLDM0LjEsMS45Myw5LjcyLS41%0D%0ANCwxOC04LjQ4LDI0LTcuNDIsNS42Mi0xNC45MSwxMS4zMS0yMywxNS45MS0xMC4yOSw1Ljg4LTE5%0D%0ALjMxLDEyLjg2LTI2LjQ1LDIyLjM4LTMuNjEsNC44MS00LjgxLDQuMy03LjM2LS44NS0uOTItMS44%0D%0ANi0zLjQ4LTQtNS4zMi00LjA1YTE4LjU2LDE4LjU2LDAsMCwwLTkuMzksMi40NGMtMTUuNTksOS4y%0D%0AOS0xOS4wNywzMy03LjEzLDQ2Ljc1LDIuNjcsMy4wNiw1LjkzLDMuMjksOC45NCwxLjIzYTMyLjY0%0D%0ALDMyLjY0LDAsMCwwLDgtNy4zOWM4LjE2LTExLjI0LDE4LjgxLTE5LjMxLDMxLjMyLTI0LjksMTAu%0D%0AODEtNC44MywxOS44OC0xMS45MywyOC44MS0xOS41Myw2LjQxLTUuNDYsMTMuNzYtOS44MywyMC43%0D%0ALTE0LjY3LjU0LS4zOCwxLjE2LS42NSwxLjc0LTEsMjAuNTEtMTEuNTgsMjUuNTEtMjMuODUsMTkt%0D%0ANDYuNTdhNi40Myw2LjQzLDAsMCwxLS4xMS0zLjg0YzIuNDUsMy4zMiw1LDYuNiw3LjM0LDEwLDku%0D%0AODQsMTQsMTkuNTUsMjguMTcsMjkuNDYsNDIuMTYsNiw4LjQxLDEyLjQ4LDE2LjQzLDE4LjIyLDI1%0D%0AYTEwNy40NiwxMDcuNDYsMCwwLDEsMTUuMjEsMzMuNDhBNDguMjYsNDguMjYsMCwwLDAsODE1LDc4%0D%0AMi4xMnE0LjkzLDkuMjUsMTUuNiwxMC4wOWM5LjE0LjcyLDExLjgsMy41OSwxMi40NiwxMi44LjEx%0D%0ALDEuNS4yLDMsLjMyLDQuNDkuNzQsOS40Miw0LjgyLDEzLjgyLDE0LjA2LDE1LjIzLDEsLjE1LDEu%0D%0AOTMuNDMsMi44OS42NVoiLz48L3N2Zz4=' alt='horse photo height='150' width='150'>
  </div>
  </div>

style.css

div {
  width: 100px;
  height: 150px;
  position: relative;
  animation:  mymove 10s infinite;
  animation-timing-function: linear;
}

.container{
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 15rem;
  transform: translateX(-50%);
	opacity: 0.75;
	overflow: visible;
  transform-origin: 50% 100%;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 500px;}
  
  0% { transform: translate(1px, 1px) translateY(15px) rotate(0deg);}
  5% {translateY(0px);}
  10% { transform: translate(-1px, -2px) translateY(-15px) rotate(-5deg); }
  15% {translateY(0px);}
  20% { transform: translate(-3px, 0px) translateY(15px) rotate(5deg); }
  25% {translateY(0px);}
  30% { transform: translate(3px, 2px) translateY(-15px) rotate(0deg); }
  35% {translateY(0px);}
  40% { transform: translate(1px, -1px) translateY(15px) rotate(5deg); }
  45% {translateY(0px);}
  50% { transform: translate(-1px, 2px) translateY(-15px) rotate(-5deg); }
  55% {translateY(0px);}
  60% { transform: translate(-3px, 1px) translateY(15px) rotate(0deg); }
  65% {translateY(0px);}
  70% { transform: translate(3px, 1px) translateY(-15px) rotate(-5deg); }
  75% {translateY(0px);}
  80% { transform: translate(-1px, -1px) 
translateY(15px) rotate(5deg); }
  85% {translateY(0px);}
  90% { transform: translate(1px, 2px) translateY(-15px) rotate(0deg); }
  95% {translateY(0px);}
  100% { transform: translate(1px, -2px) translateY(15px) rotate(-5deg); }
}
}