translate the axis to center when animation

Question

I have circle-div, and translate the axis to center.

However when I add the animation, the axix is moved. How can I fix??

.circle{
 width: 100px;
 height: 100px;
 border-radius: 50%;
  background-color:red;
    position: absolute;
    z-index: 100;
    padding:5px;
    text-align:center;
    transform: translate(-50%,-50%);
    transform-origin: translate(-50% -50%);
    transition-duration: 300ms;
}


.fuwafuwa {
    -webkit-animation:fuwafuwa 0.5s infinite linear alternate;
    animation:fuwafuwa 0.5s infinite linear alternate;
}

@-webkit-keyframes fuwafuwa {
    0% {-webkit-transform:translate(-50%,-50%);}
    50% {-webkit-transform:scale(1.0,1.0);}
    100% {-webkit-transform:scale(1.0,1.0);}
}

@keyframes fuwafuwa {
    0% {transform:scale(1,1);}
    100% {transform:scale(2,2);}
}

<div class="circle fuwafuwa"></div>
<!-- if you remove fuwafuwa class the center will be fixed -->

score 0 · Answer 1 · answered Feb 13 '20 at 07:21

Check My Answer...

.circle{
 width: 100px;
 height: 100px;
 border-radius: 50%;
  background-color:red;
    position: absolute;
    z-index: 100;
    padding:5px;
    text-align:center;
    transform: translateY(-50%);
    transition-duration: 300ms;
    top:50%;
    left:0;
    right:0;
    margin:auto;
}


.fuwafuwa {
    -webkit-animation:fuwafuwa 0.5s infinite linear alternate;
    animation:fuwafuwa 0.5s infinite linear alternate;
}

@-webkit-keyframes fuwafuwa {
    0% {-webkit-transform:translate(-50%,-50%);}
    50% {-webkit-transform:scale(1.0,1.0);}
    100% {-webkit-transform:scale(1.0,1.0);}
}

@keyframes fuwafuwa {
    0% {transform:scale(1,1);}
    100% {transform:scale(2,2);}
}

<div class="circle fuwafuwa"></div>
<!-- if you remove fuwafuwa class the center will be fixed -->

translate the axis to center when animation

1 Answers1