html5 - Using clip-border for translating image -

i try find way, how it's possible translate image (showed below) within given polygon border. when image on border, want cut part of image. tried use clip (outdated , doesn't have polygon shapes) , clip-path (cuts image itself, not border within image should move) command, until without useful results.

for now, code snippet of box it's contents:

<div id="box">     <span class="b0"><img src="..."></span> </div> 

i translate image webkit-transform command in css that:

#box .b0 {     webkit-transform : animate1 30s 0s infinite; } 

and animation given that:

@keyframes animate1 {     0% { -webkit-transform : translatex(0px); }     100% { -webkit-transform : translatex(-100px); } } 

all of keyframes modified different browser types , work without problem. want animated image translate within given polygon border, can see here in example (a). in example (b) see current result, not working.

got working. seems firefox apply overflow: hidden if have rounded or cut edges webkit browsers don't.

i found workaround problem - little hacky solution. can find reference here: stackoverflow reference post

below find solution in action:

@-webkit-keyframes animate {      0% { transform: translatex(-130px); }      100% { transform: translatex(230px); }  }    @-moz-keyframes animate {      0% { transform: translatex(-130px); }      100% { transform: translatex(230px); }  }    @keyframes animate {      0% { transform: translatex(-130px); }      100% { transform: translatex(230px); }  }    #box {      background-color: tomato;      width: 300px;      margin-left: 50px;      border-top: 10px red;      border-right: 10px blue;      overflow: hidden;      -moz-border-radius: 50%;      -webkot-border-radius: 50%;      border-radius: 50%;      /* fixes overflow:hidden in chrome */      -webkit-mask-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaabcaiaaacqd1peaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaaa5jrefuenpiygbgaagwaaaeaagba+ojaaaaaelftksuqmcc);  }    #box .b0 {      display: inline-block;      border: 1px dashed black;      -webkit-animation: animate 2s infinite;      -moz-animation: animate 2s infinite;      animation: animate 2s infinite;  }

<div id="box">      <span class="b0"><img src="http://png-5.findicons.com/files/icons/547/sport/128/tennis_ball.png"/></span>  </div>

i hope provide looking for.

best regards