Help CSS Animation Being Weird

[PrincessMuk]

Hey! So, I've done CSS Animations before (in fact, I'm literally copy/pasting this code from one I made that 100% works) but I cannot for the life of me figure this out. When I removed this:

 background-size: 100%;

the problem stopped happening, but then my image was too zoomed in and didn't show all of it. Anyone know what's happening/how I can fix it?

[class=bkgd] position: relative; box-sizing: border-box; background: White; width: 960px; height: 710px; overflow: auto; margin: auto; padding: 0; align-content: center; [/class] [class=coverpic] position: absolute; box-sizing: border-box; border-right: 7px solid #dbc09e; background-image: url(https://www.rpnation.com/gallery/selection-rp-cover-6-jpg.41916/full); background-size: 100%; width: 960px; height: 710px; overflow: hidden; margin: 0; padding: 0; top:0; transition: all 1.5s ease-in-out; cursor: pointer; [/class] [class=hide] width: 0px; [/class] [class=coverpicShow] opacity: 1; width: 70px; [/class] [script=coverpic] set IsText 1 [/script] [script class=coverpic on=click] if (eq ${IsText} 1) (addClass hide coverpic) if (eq ${IsText} 0) (removeClass hide coverpic) if (eq ${IsText} 1) (set IsText 0) (set IsText 1) [/script] [div class=bkgd] [div class="coverpic show"][/div] [/div]

Spoiler: Code

[nobr]

    [class=bkgd]
        position: relative;
        box-sizing: border-box;
        background: White;
        width: 960px;
        height: 710px;
        overflow: auto;
        margin: auto;
        padding: 0;
                align-content: center;
    [/class]

    [class=coverpic]
        position: absolute;
        box-sizing: border-box;
        border-right: 7px solid #dbc09e;
                background-image: url(https://www.rpnation.com/gallery/selection-rp-cover-6-jpg.41916/full);
                background-size: 100%;
        width: 960px;
        height: 710px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        top:0;
        transition: all 1.5s ease-in-out;
        cursor: pointer;
    [/class]

    [class=hide]
        width: 0px;
    [/class]

    [class=coverpicShow]
        opacity: 1;
        width: 70px;
    [/class]

    [script=coverpic]
        set IsText 1
    [/script]

    [script class=coverpic on=click]
        if (eq ${IsText} 1) (addClass hide coverpic)
        if (eq ${IsText} 0) (removeClass hide coverpic)
        if (eq ${IsText} 1) (set IsText 0) (set IsText 1)
    [/script]

[div class=bkgd]
[div class="coverpic show"][/div]
[/div]
[/nobr]

 

[Alteras]

Try using background-size: cover; or background-size: auto 100%; as well as background-repeat: no-repeat;

Whats happening is that during the transition of your two width, the browser is still counting the width, and as such, it's reading background-size: 100% as "match the size of the background to 100% of the width." That's why you see the image shrinking and multiplying at the same time.

The solution I gave you above will work just fine without further modification, but if you want the image to be set to a specific width instead, you'd have to use a different method of changing the width. I'd recommend either using transform scaleX() or clip-path.

 

[PrincessMuk]

Try using background-size: cover; or background-size: auto 100%; as well as background-repeat: no-repeat;

Whats happening is that during the transition of your two width, the browser is still counting the width, and as such, it's reading background-size: 100% as "match the size of the background to 100% of the width." That's why you see the image shrinking and multiplying at the same time.

The solution I gave you above will work just fine without further modification, but if you want the image to be set to a specific width instead, you'd have to use a different method of changing the width. I'd recommend either using transform scaleX() or clip-path.

Ah, that makes sense. Thank you!