CODEWITHSUNDEEP
htmlcss
Jerry
Jerry

Reputation: 1089

initiate css transitions on page load

Im trying to understand CSS Transition - but I cant make it happen. I want to make a line go from 0 to 100% width with a small delay on pageload. I understand that CSs transition needs a trigger, and tried to read up to a jQuery or Vanilla Js solution, but get stuck.

Why is this ot working? Jsfiddle: https://jsfiddle.net/1fzzgnwy/

<div class="container">
<span class="h-line"></span>
</div>

.h-line {
position: absolute;
z-index: -1;
width: 0%;
height: 10px;
right: 0;
background-color: #000;
top: 400px;
transition: right 1.5s linear;
transition-delay: 2s;
}

.h-line.ready {
width: 100%;
background-color: #000;
}

.container {
height:100%;
width:100%;
}

$(function(){
$('.h-line').addClass('ready');
});

Upvotes: 0

Views: 130

Answers (2)

Francesco Orsi
Francesco Orsi

Reputation: 2089

In your jsfiddle link (https://jsfiddle.net/1fzzgnwy/) there are some errors.

Here a simplified example of your code that work https://jsfiddle.net/50t3qwmL/ .


    .h-line {

        position: absolute;
        top: 0;
        right: 0;

        width: 20px;
        height: 20px;

        background-color: #000;
        transition: .3s;
        transition-delay: 2s;

    }

    .h-line.ready {

        width: 100%;

    }

Upvotes: 0

Derek Story
Derek Story

Reputation: 9583

In your transition line, you are telling it to transition right, but that doesn't change in the added class. Your width does. So you need to transition the width like transition: width 1.5s linear;: JS Fiddle

And if you want it to expand left to right, remove right: 0: JS Fiddle

Upvotes: 4

Related Questions