I want to rotate the ball inside the circle so it touches every corner of the bigger circle and animation continuous infinitely as it is a logo animation. body { background-color: #272727; height: 100vh; display: flex; justify-content: center; align-items: center; } .line { position: relative; width: 100px; height: 100px; border-radius: 50%; background-color: #fff; } .circle… Read More small ball rotation animation inside the bigger ball

Trying to figure out the semantics behind why this works. In this admin dashboard there’s a settings button that is fixed to the right side of the UI. https://www.akveo.com/ngx-admin/pages/layout/stepper If we click the settings button the settings panel expands and this moves the button. However if we look at the right css position (With the… Read More Dynamically moving a fixed position button?

I have a mini-question concerning the return value of transformOrigin in javascript : I have a simple div with a transform-origin set to 0 0 via CSS and i’m trying to console.log() the div.style.transformOrigin but I get nothing, not even an error… What am I doing wrong ? In here link it says "Return the… Read More Why is return transformOrigin nor working?

I have this project, with this navbar like you see I am using flexbox, and it is correctly viewed. but they tell me that I need that the navbar is rotated, and the text be viewed like so: rotated 90deg. hover working fine with the same rotation. the black line at the bottom should be… Read More positioning a rotated 90deg element isn't responsive

I have a settings button (img with an icon as the src) that I want to spin when the cursor is hovering, and then scale down and back to normal when the user presses on it. #settings-button:hover { transition: transform 1s ease-out; transform: rotate(360deg); } #settings-button:active { transition: transform 50ms ease-out; transform: scale(0.90); } With… Read More Can you have different transition times on the same transition property?

I am trying to chain together 2 transforms, but I want the 2nd one to begin after the 1st one ends. This is how I am trying to do it: .trailingNote { position:absolute; bottom:0px; background:black; width:20px; transition: transform 5s; transition-timing-function: linear; } .trailingNote-moveUp{ transform: scaleY(10) translateY(-200px); } Basically, I want the element to be scaled… Read More Apply transformation to CSS element after previous transformation ended

Here is my markup: <div class="labels"> <p>Very Funny</p> </div> Here is my CSS: div.labels p { background: red; border-left: 2rem solid white; border-right: 2rem solid white; color: white; font-family: ‘Bebas Neue’; text-transform: uppercase; line-height: 0.8; transition: 0.4s ease all; font-size: 4rem; -webkit-text-stroke: 2px white; letter-spacing: 2px; width: fit-content; padding: 1rem 2rem; transform: skew(-10deg); } Here… Read More Remove background outline on the side of the border after skew transform

In first-child of container, translateY property make element disappear but when it comes to last child it increases the size of page and stays on page. I want it to disappear and gives the transition effect on both the child. body{ height: 100vh; } .container{ height: 100vh; width: 100vw; font-size: 2em; display: flex; flex-direction: column;… Read More TranslateY is increasing the size of page

I want to transform translate x axis every 2 second for four times and come back to original position, in css. example gif as shown in gif I want to move the dot every 2 second for four times and come back the repeating times may vary(4 times may vary) but the animation should occur… Read More Transform translateX every 2 second &come back