Footguy CSS

by paulftw

HTML

<pre>
 oo     Footguy CSS animation
<|>        by Paul Korzhyk</pre>
<div class="legs">
    <pre class="frame1">_|_</pre>
    <pre class="frame2">_|/</pre>
</div>

CSS

@-webkit-keyframes dflip {
 0%, 49.9% {
  visibility: visible;
  opacity: 1;
 }
 50%, 100% {
  visibility: hidden;
  opacity: 0;
 }
}

.frame1, .frame2 {
    position: absolute;
}

.frame1 {
 -webkit-animation: dflip 0.4s 0 infinite;
 -moz-animation: dflip 0.4s 0 infinite;
 -ms-animation: dflip 0.4s 0 infinite;
}

.frame2 {
 -webkit-animation: dflip 0.4s 0.2s infinite;
 -moz-animation: dflip 0.4s 0.2s infinite;
 -ms-animation: dflip 0.4s 0.2s infinite;
}

.legs {
    position: relative;
}