css – Animate转换只有一个属性(scale)覆盖其他(translate)

问题是转换属性的值有多个部分,如translate,scale等.

这是一个关于元素的理论问题,让我们的.loader有变换：translate(10px,10px),在动画中我想要为scale属性设置动画.在这种情况下,浏览器不会进行转换：translate(10px,10px)并且仅采用比例.

我正在寻找解决这个问题的方法.

这是这个问题的一个例子.请注意,我不是在寻找这个特定示例的答案(比如：包装元素或将translate值添加到动画定义中),而是一个通用的解决方案(当然,如果存在的话).

.loading {
  position: relative;
  width: 100px;
  height: 100px;
  background: #eee;
}
.loading:before,.loading:after {
  content: "";
  width: 50%;
  height: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  /* the broswer doesn't take this */
  transform: translate(100px,300px);
  -webkit-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out;
}
.loading:after {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
@keyframes bounce {
  0%,100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

<div class="loading"></div>

解决方法

通常,当您添加对transform属性进行更改的动画时,也应该继承基本元素中指定的变换以在动画的关键帧中出现.也就是说,新变换(动画的一部分)应该添加到现有变换之上,而不是覆盖它.以下是应该如何做的.

.loading {
  position: relative;
  width: 200px;
  height: 200px;
  background: #eee;
}
.loading:before,.loading:after {
  content: "";
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(100px,300px);
  animation: bounce 2s infinite ease-in-out;
}
.loading:after {
  animation-delay: -1s;
}
@keyframes bounce {
  0%,100% {
    transform: scale(0) translate(100px,300px);
  }
  50% {
    transform: scale(1) translate(100px,300px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="loading"></div>

我写了一个类似的答案here,关于在一个元素上添加多个动画的问题,每个动画修改转换属性的值独立于另一个.我在这里链接它只是为了参考,不认为它们是重复的.

如上所述,当您尝试创建动画库或尝试将每个动画拆分为单独的类时,将原始变换添加到每个动画的kefyrames是不可能的.比如说,您想要将相同的反弹动画添加到多个元素,并且每个元素都有不同的初始变换设置,那么就无法将其添加到动画的关键帧中.

在这种情况下,您仍然可以使用CSS实现所需的输出,但在我看来,使用单个元素完成它将非常困难(几乎不可能).

你有什么选择？好吧,一个选项是你在包装元素上添加动画.

.loading-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  background: #eee;
}
.loading-before,.loading-after {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 0px;
  left: 0px;
  animation: bounce 2s infinite ease-in-out;
}
.loading-before:before,.loading-after:before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(100px,300px);
}
.loading-after {
  animation-delay: -1s;
}
@keyframes bounce {
  0%,100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="loading-wrapper">
  <div class="loading-before"></div>
  <div class="loading-after"></div>
</div>

该解决方案非常通用,您可以将它应用于几乎所有这些情况.缺点是,如果你想要堆叠多个这样的转换,那么你最终可能会遇到多个这样的包装器.除了在动画的关键帧中添加原始变换之外,没有纯CSS方式.

下面的代码片段是另一个示例.

.move-n-scale {
  position: relative;
  height: 100px;
  width: 100px;
  background: sandybrown;
  border: 1px solid chocolate;
  transform: scale(0.5);
  animation: move 1s linear infinite alternate-reverse;
}
.move {
  position: relative;
  display: inline-block;
  animation: move-only 1s linear infinite alternate-reverse;
}
.scale {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 0px;
  left: 0px;
  background: sandybrown;
  border: 1px solid chocolate;
  transform: scale(0.5);
}
@keyframes move {
  from {
    transform: translateX(0px) scale(0.5);
  }
  to {
    transform: translateX(300px) scale(0.5);
  }
}
@keyframes move-only {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(300px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='move-n-scale'></div>
<div class='move'>
  <div class='scale'></div>
</div>

Note: Just to clarify,I did notice that you had mentioned about not wanting a solution which is very specific to this problem like wrap it etc. But,I had still added this solution as an answer because it is the only generic solution which I am aware of. I had added the second snippet only to show that is is indeed generic.

css – Animate转换只有一个属性(scale)覆盖其他(translate)

解决方法

相关文章