What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

Help CSS Animation Being Weird

PrincessMuk

Turns Out I Was An Ace Legend All Along...
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:
Code:
 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?



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

The Sleepy One
Moderator
Supporter
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

Turns Out I Was An Ace Legend All Along...
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!
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top