CSS3 trigger transition on page load

Question

I am trying to achieve a loading effect when loading a page using CSS3 width transition. Here is a demo .

HTML

<div class="skill-bar"> <span class="w70"></span> </div> 

CSS

 .skill-bar { width: 57%; float: left; height: 11px; border-radius: 5px; position: relative; margin: 6px 0 12px 0; border: 2px solid #00edc2; } .skill-bar span { background: #00edc2; height: 7px; border-radius: 5px; display: inline-block; } .skill-bar span.w70 { width: 70%; } .skill-bar span { width: 0; transition: width 1s ease; -webkit-transition: width 1s ease; background-color: #00edc2; } 

Not working as expected. I need the transition to happen when the page is loaded.

But when I check the element and check / uncheck the width box of the range, I get the effect.

How to achieve the same effect when loading a page?

Answer 1

You can achieve the effect without JavaScript and without any compatibility issues using CSS animations:

 <div class="skill-bar"> <span class="w70"></span> </div> 

---

 .skill-bar { width: 57%; float: left; height: 11px; border-radius: 5px; position: relative; margin: 6px 0 12px 0; border: 2px solid #00edc2; } .skill-bar span { background: #00edc2; height: 7px; border-radius: 5px; display: inline-block; } .skill-bar span { animation: w70 1s ease forwards; } .skill-bar .w70 { width: 70%; } @keyframes w70 { from { width: 0%; } to { width: 70%; } } 

Script for webkit: http://jsfiddle.net/ySj7t/

Answer 2

Add class via javascript:

 $(".skill-bar span").addClass("w70"); 

See the fiddle here .

Answer 3

By removing the class from the range and setting it to JavaScript, the browser will apply the transition, but this only works with the first .skill-bar . Also .getElementsByClassName will not work in IE8 or lower.

HTML

 <div class="skill-bar"><span></span></div> 

Javascript

 document.getElementsByClassName('skill-bar')[0].getElementsByTagName('span')[0].className = 'w70'; 

(so just wrap this in a <script> element after HTML or see run the function when the page loads

Pure JavaScript Demo

You probably want the jQuery solution (or other framework) to provide compatibility with multiple browsers, but this creates a structural dependency. If you enable jQuery, it will be great. If not, you need to enable this library first and then use:

JQuery

 $(window).load(function(){ $('.skill-bar span').addClass('w70'); }); 

jQuery daemon

Right-click on the output frame and select "View Frame Source" to see the output code.