CSS3 Animation Preloader - Codepen to JSFiddle not working -

i trying use pre-loader i've found on over codepen, seems when use code off site things don't work expected.

i'm wondering why may be?

codepen : http://codepen.io/anon/pen/egudf

jsfiddle : http://jsfiddle.net/slmral69/

the code :

css

.load {     position:absolute;     top:50%;     left:50%;     transform:translate(-50%, -50%);     /*change these sizes fit project*/     width:100px;     height:100px; } .load hr {     border:0;     margin:0;     width:40%;     height:40%;     position:absolute;     border-;     animation:spin 2s ease infinite }  .load :first-child {     background:#35a9da;     animation-delay:-1.5s } .load :nth-child(2) {     background:#71d0c8;     animation-delay:-1s } .load :nth-child(3) {     background:#35a9da;     animation-delay:-0.5s } .load :last-child {     background:#35a9da }  @keyframes spin{   0%,100%{ transform:translate(0) }       25%{ transform:translate(120%) }       50%{ transform:translate(120%, 120%) }       75%{ transform:translate(0, 120%) } } 

html

<div class="load">   <hr/><hr/><hr/><hr/> </div> 

the element doesn't spin , elements stacked on top of each other. not sure i'm missing here not reliant on js library.

if add -webkit prefix animation , transform properties, things act quite strangely.

thanks!

you have codepen's css configured prefix-free, meaning vendor prefixes (like -webkit- , -moz-) automatically inserted applicable.

this means when copy on code jsfiddle, no longer have setting available you, , required prefixes aren't present in code, , you'll need add these in manually.

for part can rely on can use... finding out whether css properties require vendor prefixes or not. example, if transform we'll see ie9 requires -ms- prefix, old versions of firefox require -moz- prefix , older versions of chrome , other webkit-based browsers require -webkit- prefix:

we can add these in manually changing:

transform:translate(-50%, -50%); 

to:

-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); 

...and doing other properties may require such prefixes in order them work.