Image Replacement Test

HTML

<h1>Image Replacement Methods</h1>

<p>
    Test this page with <a href="http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling">the bookmarklet on this page</a> and share your results.
</p>

<hr>

<div>
    <h2>-9999px method</h2>
    <span class="static ir-a">Some hidden text here</span>
    <span class="animated ir-a">Some hidden text here</span>
</div>

<hr>

<div>
    <h2>100% method</h2>
    <span class="static ir-b">Some hidden text here</span>
    <span class="animated ir-b">Some hidden text here</span>
</div>

<hr>

<div>
    <h2>100% + font method</h2>
    <span class="static ir-c">Some hidden text here</span>
    <span class="animated ir-c">Some hidden text here</span>
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

div {
  width: 50%;
  float: left;
  height: 100%;
  text-align: center;
}

span {
  background-image: url('http://lab.pgdn.us/hidden-text-performance/pickles.jpg');
  width: 260px;
  height: 195px;
  display: inline-block;
}

hr
{
    clear: both;
}

.ir-a {
  text-indent: -9999px;
  overflow: hidden;
}

.ir-b {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.ir-c
{
    direction: ltr;
    font: 0/0 serif;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.ir-c *
{
    clip: rect(0 0 0 0);
    position: absolute;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes rotate {
  from {
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animated {
  -webkit-animation: rotate 5s linear infinite;
  -moz-animation:    rotate 5s linear infinite;
  -ms-animation:     rotate 5s linear infinite;
  -o-animation:     rotate 5s linear infinite;
  animation:     rotate 5s linear infinite;
}