[Solved] CSS Logo animation zoom-in from the wrong side

[xellos81]

Hello,
I’m here, on this test-project, trying to learn new CSS tecniques (thanks css tricks!), like CSS animation and something similar.

I’m trying to make the logo zoom-in + fade-in from the center
but instead it zoom-in from the up-left corner

can somebody tell me what am I doing wrong?

This is my CodePen

thank you in advance

[shaneisme]

Be sure to run your code through a validator, you’ve got at least one typo on the css property text-align (you have it set to “aling” under .big-logo)

[xellos81]

thank you! …but that did not solved my problem :(

(codepen updated)

[Paulie_D]

It would be more helpful if you gave us a reduced case in Codepen removing all of the cruft *not** related to this issue.

We (certainly I) hate wading through reams of unrelated code just to find one tiny speck of stuff.

Quite often doing this will enable to to concentrate on the specific issue and possibly find the solution on your own.

http://www.sscce.org/

[xellos81]

you’re totally right, but the thing is, that I’m afraid that there is something wrong between this part interacting with other aspects of the page, that’s why I kept it as it is

[xellos81]

Yay!
I’ve found the solution myself

I just had to add a new and centerd “margin-left” to the animation

@-webkit-keyframes biglogo_in {
0% { opacity: 0; }

50% { opacity: 0;
margin-left: -19vw;
width: 38vw;
margin-top: -3vw;}

100% { opacity: 1;
margin-left: -22vw;
width: 44vw; }
}

this is the new and working CodePen Link

[shaneisme]

you’re totally right, but the thing is, that I’m afraid that there is something wrong between this part interacting with other aspects of the page, that’s why I kept it as it is

That’s exactly why you do it – to find out if that’s the case or not.

It looks good to me at certain viewport sizes, but at especially small ones it gets messed up pretty quickly.

Also, just in case you didn’t know: http://caniuse.com/#search=viewport – decent support for viewport units but it’s not perfect by any stretch.

[Author]

Posts