animation changes position

[m1a1t]

Hello, I am trying to learn css and I am learning animations. I am finding that when the animation is applied it moves to the top of the page and I can't understand why or make it move.

If you remove the "1s" from the .spinning cleass - so that it isnt spinning, it moves to the desired location - the center of the page.

<div class="spinning">
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 1.0;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 1.4;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 1.8;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 2.2;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 2.6;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 3.0;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 3.4;"></img>
    </div>

.abcenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform-origin: 0 0;
    z-index: -5;
}

.spinning {
  animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
  }
    100% {
      -webkit-transform: rotate(360deg);
  }
}

.vectorColor {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(186deg) brightness(118%) contrast(119%);
 }

 

[m1a1t]

I figured out that if I move abcenter out of the image classes and put it in the div (parent) then that solved it. So the correct code is:

<div class="abcenter spinning">

Now the circle spins from the center in the middle of the page. Took some doing,

I cant really say I understand why but at least now I can move on. Any input about it is welcome.

 

[m1a1t]

actually it needed to be in both the div and the image classes

<div class="abcenter spinning">
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 1.0;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 1.4;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 1.8;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 2.2;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 2.6;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 3.0;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 3.4;"></img>
    </div>

I dont know why this is. Ive got the property
transform-origin: 0 0; in that class and it may be something to do with that. This whole thing is a learning excercise so it would be good to get some feedback about it but yes, at least now I have got it to a place where it does what I wanted. I had read something about svgs having particular differences in positioning and inhertance. I'll just have to keep reading.

 

[tomliv]

<div class="spinning">
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 1.0;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 1.4;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 1.8;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 2.2;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 2.6;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 3.0;"></img>
        <img class="abcenter vectorColor" src="https://siliqua.buzz/static/images/shell.svg" style="scale: 3.4;"></img>
    </div>

}[/CODE]

Is this the only HTML on your page?

 

[m1a1t]

Is this the only HTML on your page?

its not but I tested the issue on codepen with just the bits i provided and it performs the same way.

 

[tomliv]

Based on a codepen...

Absolute positioning is all based on the closest parent with a positioning context. So you had to give the parent a context so the children "knew" where to be.

What's interesting to me is that the default position for elements is 'static', so I am not sure why the position of your wrapper works like it does. If you add position:relative; to the body, it jumps half off the top of the page, which makes sense to me as absolute positioned elements are removed from the flow of the document and since everything you have is absolutely positioned, the body is only a few pixels high (default padding/margin).

 

[m1a1t]

ok thankyou, its starting to make sense a little bit.

The absolute position can't be inherited and so the next one it inherits if it doesnt have any position set would be the body or html - which if arent set are default to static - which like you say (that i didnt know) are defaulted to only a few pixels high. So it would go top: 50% and left 50% of a container only a few pixels high - which makes sense that its in the top of the screen - kind of.

So now I need to work on setting the body/html to be 100vh; or something to get a parent frame set up for which top 50% and left 50% is actually the middle of the screen. There is no need to use absolute, Im going to try and make it relative to what the page body is defined as.

This is something ive struggled with all my life, just got to put the work in and learn it properly which is the whole point of this post - thanks for the tips and ill keep going. Ill perhaps share the proper code setup of it when Im done. I've got it to work, but thats not enough, i need to do what I want when I say it, not just fluke it.

 

[m1a1t]

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

so it seems adding this css to the original code solves it - to add properties that the spinning class (parent) can inherit.