The basic spinning hover animation is not functioning properly

Question

The basic spinning hover animation is not functioning properly

Can anyone help me with creating a hover effect on an inner circle that causes two outer rings to rotate? I've been struggling to make it work as expected. When I hover over the inner circle, the outer rings only move to the bottom right corner without rotating. Any insights on what might be missing here would be greatly appreciated. Thank you!

.wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  margin: auto auto;
  background: black;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: grey;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-1 {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px;
  border-style: solid;
  border-color: white white white transparent;
  transition: 1.5s all ease-in-out;
}

.circle-2 {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px;
  border-style: solid;
  border-color: white transparent white white;
  transition: 1.5s all ease-in-out;
}

.circle:hover .circle-2 {
  transform: rotate(360deg);
}

.circle:hover .circle-1 {
  transform: rotate(-360deg);
}

<div class="wrapper">
  <div class="circle">
    <div class="circle-1"></div>
    <div class="circle-2"></div>
  </div>
</div>

css css-transforms

Answer 1

Answer №1

Utilizing the transform property for translation to center your element and then overriding it with rotation can lead to issues. A better approach would be adjusting the top and left values to achieve centering without using transform, thus allowing for the desired rotation:

.wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  margin: auto auto;
  background: black;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: grey;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-1 {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: calc(50% - 55px);
  left: calc(50% - 55px);
  border: 2px;
  border-style: solid;
  border-color: white white white transparent;
  transition: 1.5s all ease-in-out;
}

.circle-2 {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: calc(50% - 60px);
  left:calc(50% - 60px);
  border: 2px;
  border-style: solid;
  border-color: white transparent white white;
  transition: 1.5s all ease-in-out;
}

.circle:hover .circle-2 {
  transform: rotate(360deg);
}

.circle:hover .circle-1 {
  transform:  rotate(-360deg);
}

<div class="wrapper">
  <div class="circle">
    <div class="circle-1"></div>
    <div class="circle-2"></div>
  </div>
</div>

An alternative way to streamline your code is by utilizing pseudo-elements like this:

* {
 box-sizing:border-box;
}
.wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  margin: auto;
  background: black;
}

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background:radial-gradient(circle at center, grey 50px,transparent 51px);
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle:before,
.circle:after {
  content:"";
  border-radius: 50%;
  position: absolute;
  transition: 1.5s all ease-in-out;
  border: 2px solid white;
}

.circle:before {
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-left-color:transparent;
}

.circle:after{
  top:5px;
  left:5px;
  bottom:5px;
  right:5px;
  border-right-color:transparent;
}

.circle:hover::before {
  transform: rotate(360deg);
}

.circle:hover::after {
  transform:  rotate(-360deg);
}

<div class="wrapper">
  <div class="circle">
  </div>
</div>

Answer 2

Utilizing the transform property for translation to center your element and then overriding it with rotation can lead to issues. A better approach would be adjusting the top and left values to achieve centering without using transform, thus allowing for the desired rotation:

.wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  margin: auto auto;
  background: black;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: grey;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-1 {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: calc(50% - 55px);
  left: calc(50% - 55px);
  border: 2px;
  border-style: solid;
  border-color: white white white transparent;
  transition: 1.5s all ease-in-out;
}

.circle-2 {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: calc(50% - 60px);
  left:calc(50% - 60px);
  border: 2px;
  border-style: solid;
  border-color: white transparent white white;
  transition: 1.5s all ease-in-out;
}

.circle:hover .circle-2 {
  transform: rotate(360deg);
}

.circle:hover .circle-1 {
  transform:  rotate(-360deg);
}

<div class="wrapper">
  <div class="circle">
    <div class="circle-1"></div>
    <div class="circle-2"></div>
  </div>
</div>

An alternative way to streamline your code is by utilizing pseudo-elements like this:

* {
 box-sizing:border-box;
}
.wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  margin: auto;
  background: black;
}

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background:radial-gradient(circle at center, grey 50px,transparent 51px);
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle:before,
.circle:after {
  content:"";
  border-radius: 50%;
  position: absolute;
  transition: 1.5s all ease-in-out;
  border: 2px solid white;
}

.circle:before {
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-left-color:transparent;
}

.circle:after{
  top:5px;
  left:5px;
  bottom:5px;
  right:5px;
  border-right-color:transparent;
}

.circle:hover::before {
  transform: rotate(360deg);
}

.circle:hover::after {
  transform:  rotate(-360deg);
}

<div class="wrapper">
  <div class="circle">
  </div>
</div>

Answer 3

Answer №2

When setting the transform property within the :hover state, it is important to include the translate transforms to ensure that the circles do not move unintentionally while setting their rotation.

To create a smooth animation for the rotation, make sure to set initial values for the rotation transform.

Additionally, if you want the rotations to be repeated, using an animation with keyframes is necessary. Uncomment the animation lines in the snippet provided below to achieve this effect.

Check out the demo:

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  margin: auto auto;
  background: black;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: grey;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-1 {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  border: 2px;
  border-style: solid;
  border-color: white white white transparent;
  transition: 1.5s all ease-in-out;
}

.circle-2 {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  border: 2px;
  border-style: solid;
  border-color: white transparent white white;
  transition: 1.5s all ease-in-out;
}

.circle:hover .circle-2 {
  /*animation: spin 1.5s infinite linear;*/
  transform: translate(-50%, -50%) rotate(360deg);
}

.circle:hover .circle-1 {
  /*animation: spin 1.5s infinite linear reverse;*/
  transform: translate(-50%, -50%) rotate(-360deg);
}

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

<div class="wrapper">
  <div class="circle">
    <div class="circle-1"></div>
    <div class="circle-2"></div>
  </div>
</div>

Answer 4

When setting the transform property within the :hover state, it is important to include the translate transforms to ensure that the circles do not move unintentionally while setting their rotation.

To create a smooth animation for the rotation, make sure to set initial values for the rotation transform.

Additionally, if you want the rotations to be repeated, using an animation with keyframes is necessary. Uncomment the animation lines in the snippet provided below to achieve this effect.

Check out the demo:

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  margin: auto auto;
  background: black;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: grey;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-1 {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  border: 2px;
  border-style: solid;
  border-color: white white white transparent;
  transition: 1.5s all ease-in-out;
}

.circle-2 {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  border: 2px;
  border-style: solid;
  border-color: white transparent white white;
  transition: 1.5s all ease-in-out;
}

.circle:hover .circle-2 {
  /*animation: spin 1.5s infinite linear;*/
  transform: translate(-50%, -50%) rotate(360deg);
}

.circle:hover .circle-1 {
  /*animation: spin 1.5s infinite linear reverse;*/
  transform: translate(-50%, -50%) rotate(-360deg);
}

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

<div class="wrapper">
  <div class="circle">
    <div class="circle-1"></div>
    <div class="circle-2"></div>
  </div>
</div>

The basic spinning hover animation is not functioning properly

Answer №1

Answer №2

Similar questions

Creating responsive images in a navbar with HTML and CSS

SVG path with dynamic elements

Ways to crop a background image from the bottom left and right using CSS

The third @media query for max-width is not functioning as expected in the CSS

What is the best way to send a JavaScript variable to PHP for storage in a WordPress database?

The text is placed below the image, rather than appearing alongside it

Accordion with Tooltips

Modify the color of the text for the initial letter appearing in the sentence

I have noticed that the Javascript code is being loaded prior to the completion of my HTML/CSS page for some unknown

Formatting code within an HTML document

Animating CSS transformations with rotation

Placing the child element behind the parent element's parent does not seem to be affected by the `z-index`

The toggle button in the Bootstrap navbar for responsiveness seems to be malfunctioning

Showing an image on a blurred background-image at the top of the webpage

Why is my CSS not showing up in Live Server when I preview it from Visual Studio?

The CSS code for creating a typing effect is not functioning properly

Position the div at the center of its parent container, disregarding any floating

Styling the CSS to give each grid element a unique height

Using jQuery to insert a new string into the .css file

Is it possible to move the login button to the right side of the screen?