如果元素使用动画，则 Css-transform 不适用答案

【问题标题】：Css-transform doesn't apply if element use animation如果元素使用动画，则 Css-transform 不适用
【发布时间】：2017-02-26 07:09:26
【问题描述】：

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

此外，我想应用 zoomIn 动画并看到动画线 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);
  }
}

【问题讨论】：

How to apply multiple transforms in CSS?的可能重复
这样？ codepen.io/anon/pen/ZprjEm

标签： css animation css-transforms

【解决方案1】：

诀窍是在动画上同时设置变换。

变换的顺序也很棘手...

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>

【讨论】：

【解决方案2】：

我不确定您希望最终结果如何，但一般的解决方案是将变换属性组合在一起，如下所示：

-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

【讨论】：

【解决方案3】：

对于horizontally 中心我使用margin 0 技巧和垂直我使用比例。

注意：更好理解我标记了.boxgreen 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>

【讨论】：

【解决方案4】：

您可以使用左右位置计算：

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);

【讨论】：