CODEWITHSUNDEEP
csscss-animations
chipit24
chipit24

Reputation: 6987

Unable to animate width of element

Here is my HTML:

<section>
    <a href="http://exanple.com">
        <header>
            <span>
                Title
            </span>
        </header>
    </a>
    ...
</section>

Here is my CSS:

section header span
{
    display: inline-block;
    background-color: rgba(100, 149, 237, 0.72);

    padding: 0;
    margin: 0;
    line-height: 55px;
    padding-left: 20px;
    padding-right: 20px;

    -o-transition:.5s ease-out;
    -ms-transition:.5s ease-out;
    -moz-transition:.5s ease-out;
    -webkit-transition:.5s ease-out;
    transition:.5s ease-out;
}
section header:hover span
{
    width: 100%;
    padding-left: 25px;
    color: rgb(255, 223, 223);
}

The padding-left and color properties transition with no problems, however, the width will only animate if I set an initial width in my CSS. Right now the width will just jump to 100% while the other two properties animate.

However, because the header will contain text of variable length, I do not want to set a specific initial width.

Is there any way around this problem?

Upvotes: 1

Views: 166

Answers (2)

Zach Saucier
Zach Saucier

Reputation: 25954

Use min-width instead of width on the hover

section header:hover span
{
    min-width: 100%;
    padding-left: 25px;
    color: rgb(255, 223, 223);
}

Demo

This works as opposed to using just width because the browser doesn't know how big width:auto is. Using min-width disregards how big it currently is, affecting only the requirement that it be larger than the specified value

Upvotes: 3

Xavier Mosh
Xavier Mosh

Reputation: 51

well, may be you could use percentages in the width of the first element. also using ease-in-out effect to animate the width

section header span
{
    display: inline-block;
    background-color: rgba(100, 149, 237, 0.72);

    padding: 0;
    margin: 0;
    line-height: 55px;
    padding-left: 20px;
    padding-right: 20px;
    width: 10%;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
section header:hover span
{
    width: 100%;
    padding-left: 25px;
    color: rgb(255, 223, 223);
}

there is a jsFiddle

Upvotes: 0

Related Questions