动画时将轴平移到中心

Question

我有circle-div，并将轴平移到中心。

但是，当我添加动画时，轴移动了。 我该如何解决？

.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 -->

Answer 1

查看我的答案...

.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 -->