Having trouble aligning items on animation

[Cranedrio]

I made a logo animation with svg techniques I learned here and from the web. Turned out to be what I expected except for one thing. The center of my logo doesnt appear from the center but instead top left. Any help on how to make appear in the center instead? Thanks in advanced.

https://codepen.io/Cranedrio/pen/yEddLv

[dreamweaverx3]

#A-logo {
opacity: 0;
animation-name: bounceIn;
animation-duration: 450ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
transform-origin:center;
}

#B-logo {
opacity: 0;
animation-name: bounceIn;
animation-duration: 450ms;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
transform-origin:center;
}

[Beverleyh]

transform-origin is what you’re looking for. And you can remove a lot of repetition https://codepen.io/anon/pen/jKjgWJ

[Cranedrio]

Thank you. Can’t believe I missed that line and yeah I can actually remove repetitions. Thanks again.

[Author]

Posts