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!

    Remember to credit artists when using work not your own.

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?

[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]

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