Enable CSS transitions / transforms after pageload

March 6th, 2012

CSS transitions or transforms are triggered by user action like hovering or toggling classes.

To make CSS transitions occur at pageload we have  do a simple two step JavaScript trick: add a class and remove that class again to trigger the transition.

1. put this in the header of your page to add an extra class during loading

<script type="text/javascript">
document.documentElement.className += " js";

It will add js as a class to the html element.

2. Remove that extra class after pageload.


with jQuery


document.documentElement.className = ""


Without the  jQuery framework

document.addEventListener('DOMContentLoaded', function () {
document.documentElement.className = ""}, false);

or a very simple

document.documentElement.className = ""

In you CSS file make the transition

transition:opacity 1s ease;}

.js body{opacity:0}

This approach has the advantage that no-javascript users see the final result (opacity 1) and will miss the transition.


Leave a Reply