Trigger CSS3 transition on page load

Question

I am trying to achieve a loading effect on the page load by CSS3 width transition. Here is the 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;
}

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

But when I inspect element and check/uncheck the width of the span, I get the effect.

How to have the same effect on page load?

enter image description here

CSS transitions apply to *changes* in attributes. If you want the transition on load, then you need change something on page load. This can be easily done with JavaScript, but I'm not aware of another method without using it. — Zhihao, Mar 28 '14 at 16:41
You could style it with the initial width using CSS. With JS, have a function run on page load that changes the width to the final width you want. CSS transition will handle the animation between the two width states, so you only need to worry about changing the width with JS. — Zhihao, Mar 28 '14 at 16:48
Can you help me in my fiddle? I seem to be loosing track somewhere. :( — Ajey, Mar 28 '14 at 16:50

score 20 · Accepted Answer · answered Mar 28 '14 at 17:10

20

You can achieve the effect without JavaScript and without any compatibility issue using CSS animation:

<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%; }
}

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

answered Mar 28 '14 at 17:10

MatTheCat

16,312
6
52
66

Much nicer approach using animation – andyb Mar 28 '14 at 17:15
If you want to delay the animation, `animation-delay` doesn't seem to work. Instead modify your @keyframes to something like `@keyframes w70 { 0% { width:0%;} 50% {width: 0%;} 100% {width:70%;}}` this will mean that the animation will be delayed for 0.5s (50% of your animation duration). – Jamie Chong May 27 '15 at 02:07
Also, when the width is unknown or set some other way, you can animate `max-width`.... – random_user_name Aug 16 '19 at 19:16

lante · Answer 2 · 2014-03-28T17:10:30.923

2

Add the class throught javascript:

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

See fiddle here.

edited Mar 28 '14 at 17:10

answered Mar 28 '14 at 16:57

lante

6,736
2
31
56

score 1 · Answer 3 · edited May 23 '17 at 12:17

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

HTML

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

JavaScript

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

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

Pure JavaScript demo

You probably want a jQuery (or other framework) solution to ensure cross-browser compatibility but that introduces a dependency on the framework. If you include jQuery already then great. If not you will need to include that library first and then use:

jQuery

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

jQuery demo

Right click on the output frame and select View frame source to see the output code.

Trigger CSS3 transition on page load

3 Answers3

Linked