CODEWITHSUNDEEP
htmlcsscss-transitionscss-positioncss-animations
Marcin46
Marcin46

Reputation: 120

Absolute positioning - webkit-transition of inner elements

I have a div with position: absolute:

<div class="p1">
    <div class="laser"></div>
    <h2>p1</h2>
</div>

with this CSS:

.p1{
    position:absolute;
    top:46px;
    left:0px;
    width: 0%;
    height: calc(100% - 46px);
    background-color: blue;
    z-index: 2;
    -webkit-transition: width 4s ease;
    -moz-transition: width 4s ease;
    -o-transition: width 4s ease;
    -ms-transition: width 4s ease;
    transition: width 4s ease;
}

.laser{
    height: 100%;
    width: 3px;
    background: #ff0000;
    position: relative;
    top: 46px;
    left: 0px;
    display: block;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 20px 10px #ff0000;
    -moz-box-shadow: 0 0 20px 10px #ff0000;
    box-shadow: 0 0 20px 10px #ff0000;
    z-index: 3;
}

And when I apply width: 100% to div.p1 it animates but without the inner elements moving (they always stay in the same place). Also when p1 has width: 0% I can see its inner content and I don't know why.

EDIT:

Inner elements are not changing position because position is set :). Its enough to remove relative position of laser class and add class pull-right like tihs:

<div class="p1">
    <div class="laser pull-right"></div>
    <h2>p1</h2>
</div>

Upvotes: 0

Views: 59

Answers (1)

Minal Munakarmi
Minal Munakarmi

Reputation: 167

.p1{
    position:absolute;
    top:46px;
    left:0px;
    width: 0%;
    height: calc(100% - 46px);
    background-color: blue;
    z-index: 2;
    -webkit-transition: width 4s ease;
    -moz-transition: width 4s ease;
    -o-transition: width 4s ease;
    -ms-transition: width 4s ease;
    transition: width 4s ease;
}

.laser{
    height: 100%;
    width: 100%;   /*You have to change width from 3px to 100% and it will works */
    background: #ff0000;
    position: relative;
    top: 46px;
    left: 0px;
    display: block;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 20px 10px #ff0000;
    -moz-box-shadow: 0 0 20px 10px #ff0000;
    box-shadow: 0 0 20px 10px #ff0000;
    z-index: 3;
}

Upvotes: 1

Related Questions