Demos: Force Hardware Acceleration with translate3d

Try this example in your iOS or Android web browser, or read more about forcing hardware acceleration with translate3d. When you tap each logo below, a short, hardware-accelerated animation will play. Notice that there is a small flicker in the start of the animation if the logo element needs to be uploaded to the GPU.

I am re-using the image replacement demo here in order to create a large HTML element. The difference here is that I’m using the negative text-indent trick on both logos. The first logo is uploaded to the GPU every time the animation plays, whereas the second logo is uploaded to the GPU when the page loads, and it stays there. This is just to demonstrate the cost of repeatedly uploading a large element to the GPU, and in reality, you would not use the negative text-indent here.

Without translate3d

Tap the HTML5 logo!

HTML

<a class="html5logo"
  href="javascript:void(0);">HTML5</a>

CSS

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  text-indent: -9999px;
}

JavaScript

$('.html5logo').on('click tap', function(e) {
  e.preventDefault();
  var $self = $(this);
  $self.one('webkitAnimationEnd', function() {
    $self.removeClass('pulse');
  }).addClass('pulse');
});

With translate3d

Tap the HTML5 logo!

HTML

<a class="html5logo"
  href="javascript:void(0);">HTML5</a>

CSS

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  text-indent: -9999px;
  -webkit-transform: translate3d(0px,0px,0px);
}

JavaScript

$('.html5logo').on('click tap', function(e) {
  e.preventDefault();
  var $self = $(this);
  $self.one('webkitAnimationEnd', function() {
    $self.removeClass('pulse');
  }).addClass('pulse');
});