i tried to make this animation so it would pause when i hover on it but every time i do, only the div get paused and the pesudo elements don't so what did i do wrong? i tried to change the property like making the background color change with hover and it works! so it seems that the problem is something related to the animation but i can't get my hand on it

This is my Css

.task1 {
    /* box-sizing: border-box; */
    width: 50px;
    height: 50px;
    margin: 50px auto;
    border: #fca900 solid 5px;
    border-left: transparent solid 5px;
    border-radius: 50%;
    position: relative;
    -webkit-animation: rotate linear infinite 1s;
            animation: rotate linear infinite 1s;
}

.task1::after {
    content: "";
    width: 70%;
    height: 70%;
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    border: #2090db solid 5px;
    border-top: transparent solid 5px;
    border-radius: 50%;
    -webkit-animation: rotate linear infinite 1s;
            animation: rotate linear infinite 1s;
}

.task1::before {
    content: "";
    width: 40%;
    height: 40%;
    position: absolute;
    top: 10px;
    left: 10px;
    border: #e51758 solid 5px;
    border-right: transparent solid 5px;
    border-radius: 50%;
    -webkit-animation: rotate linear infinite 1s;
            animation: rotate linear infinite 1s;
}
 
@-webkit-keyframes rotate {
    to {
        transform:  rotate(1turn);
    }
}
 
@keyframes rotate {
    to {
        transform:  rotate(1turn);
    }
}

.task1:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

<div class="task1"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The pseudo elements are styled independently so you need to pause their animations on task1 being hovered as well.

.task1 {
  /* box-sizing: border-box; */
  width: 50px;
  height: 50px;
  margin: 50px auto;
  border: #fca900 solid 5px;
  border-left: transparent solid 5px;
  border-radius: 50%;
  position: relative;
  -webkit-animation: rotate linear infinite 1s;
  animation: rotate linear infinite 1s;
}

.task1::after {
  content: "";
  width: 70%;
  height: 70%;
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  border: #2090db solid 5px;
  border-top: transparent solid 5px;
  border-radius: 50%;
  animation: rotate linear infinite 1s;
}

.task1::before {
  content: "";
  width: 40%;
  height: 40%;
  position: absolute;
  top: 10px;
  left: 10px;
  border: #e51758 solid 5px;
  border-right: transparent solid 5px;
  border-radius: 50%;
  animation: rotate linear infinite 1s;
}

@keyframes rotate {
  to {
    transform: rotate(1turn);
  }
}

.task1:hover,
.task1:hover::after,
.task1:hover::before {
  animation-play-state: paused;
}

<div class="task1"></div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

it's happening because you are only pausing task1 not it's pesudos just do this change to your code

.task1::before, .task1::after, .task1:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}