Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

animation changes position

m1a1t

Coder
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.

HTML:
<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>

CSS:
.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%);
 }
 
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.
 
actually it needed to be in both the div and the image classes

Code:
<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.
 
HTML:
<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?
 
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).
 
Last edited:
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.
 
Last edited:
CSS:
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.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom