如果元素使用动画，则 css 变换不适用

Question

我有一个转换属性的问题。有一个盒子里面有position: absolute。为了把它放在父div的中心，我使用transform: translate(-50%, -50%)，因为在实际项目中我有自适应页面。我不能用px和负边距。

此外，我想应用缩放动画，看到动画线transform: translate(-50%, -50%)不工作。我想，这是因为双变换属性。

我该如何修复它?

这是Codepen上的例子https://codepen.io/pndparade/pen/VKGXPj

html,
body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.box{
  height: 100%;
  width: 100%;
  background: red;
  position: relative;
}
.box-in{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  animation-duration: 1.5s;
  animation-delay: 0.8s;
  animation-fill-mode: both;
  animation-name: zoomIn;
  animation-iteration-count: infinite;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
  to {
    -webkit-transform: scale3d(1, 1, .1);
    transform: scale3d(1, 1, 1);
  }
}

Answer 1

可以按左右位置计算:

left:calc(50% - 100px);
top: calc(50% - 100px);

当你需要旧版本的浏览器支持时，你可以添加:

left:-webkit-calc(100% - 100px);
left:-moz-calc(100% - 100px);
left:calc(50% - 100px);
right:-webkit-calc(100% - 100px);
right:-moz-calc(100% - 100px);
right: calc(50% - 100px);

Answer 2

对于horizontally中心我使用margin 0技巧和垂直我使用缩放

注:更好地理解我标记.box green bg

html,
body{
  height: 100%;
  margin: 0;
  padding: 0;
  background: red;
}
.box{
  height: 100%;
  width: 200px;
  margin:0 auto;
  position: relative;
  background: green;
}
.box-in{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top:-webkit-calc(100% - 100px);
  top:-moz-calc(100% - 100px);
  top:calc(50% - 100px);
  background: #fff;
  animation-duration: 1.5s;
  animation-delay: 0.8s;
  animation-fill-mode: both;
  animation-name: zoomIn;
  animation-iteration-count: infinite;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
  
  to {
    -webkit-transform: scale3d(1, 1, .1);
    transform: scale3d(1, 1, 1);
  }
}

<div class="box">
  <div class="box-in"></div>
</div>

Answer 3

我不确定您想要的最终结果，但一般的解决方案是将转换属性组合在一起，如下所示:

-webkit-transform: scale3d(1, 1, .1) translate(-50%, -50%);
transform: scale3d(1, 1, 1) translate(-50%, -50%);

例如:

• 使元素同时放大和缩放:https://codepen.io/anon/pen/rrkAZQ
• 使元素在放大之前先缩放:https://codepen.io/anon/pen/EgZpKB

Answer 4

技巧是在动画上设置两个转换。

同样棘手的是转换的顺序…

html,
body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.box{
  height: 100%;
  width: 100%;
  background: red;
  position: relative;
}
.box-in{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  animation-duration: 1.5s;
  animation-delay: 0.8s;
  animation-name: zoomIn;
  animation-iteration-count: infinite;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform:  translate(-50%, -50%) scale3d(.3, .3, .3);
    transform:  translate(-50%, -50%) scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
  
  to {
    -webkit-transform:  translate(-50%, -50%) scale3d(1, 1, .1);
    transform:  translate(-50%, -50%) scale3d(1, 1, 1);
  }
}

<div class="box">
  <div class="box-in"></div>
</div>