动画变换只有一个属性（等级）覆盖其他（翻译）

问题描述

问题是，变换属性值有一个像多个部分翻译，规模等。

这是有关元素的理论问题，让我们 .loader 有变换：翻译（10px的，10px的）而在动画我想动画比例属性。在这种情况下，浏览器不会走变换：翻译（10px的，10px的）键，将只需要在比例 。

我要寻找解决这个问题的方法。

下面是一个例子了这个问题。请记住这我不是在寻找的答案，这个特殊的例子关注（如：包装元素或添加翻译值，以动画的定义），但一个通用的解决方案（如果存在的，当然）。

\r

\r

.loading {\r
  位置：相对;\r
  宽度：100像素;\r
  高度：100像素;\r
  背景：#eee;\r
}\r
.loading：之前，\r
.loading：{后\r
  内容：;\r
  宽度：50％;\r
  高度：50％;\r
  -moz-边界半径：50％;\r
  -webkit-边界半径：50％;\r
  边界半径：50％;\r
  背景色：#FFF;\r
  不透明度：0.6;\r
  位置：绝对的;\r
  顶部：0;\r
  左：0;\r
  / *的broswer不采取这种* /\r
  变换：翻译（100像素，300像素）;\r
  -webkit-动画：反弹2S无限易于在出;\r
  动画：反弹2S无限易于在出;\r
}\r
.loading：{后\r
  -webkit-动画延迟：-1s;\r
  动画延迟：-1s;\r
}\r
@keyframes反弹{\r
  0％，100％{\r
    变换：规模（0）;\r
    -webkit-变换：规模（0）;\r
  }\r
  50％{\r
    变换：规模（1）;\r
    -webkit-变换：规模（1）;\r
  }\r
}

\r

＆LT; D​​IV CLASS =加载＆GT;＆LT; / DIV＆GT;

\r

\r

\r

解决方案

通常，当您添加一个动画与更改变换属性，则是在基本元素中指定的变换也应结转为动画的关键帧中也present。也就是说，新的转换（即是动画的一部分）应加在现有顶变换，而不是覆盖它。下面是它应该怎么做。

\r

\r

.loading {\r
  位置：相对;\r
  宽度：200像素;\r
  高度：200像素;\r
  背景：#eee;\r
}\r
.loading：之前，\r
.loading：{后\r
  内容：;\r
  宽度：50％;\r
  高度：50％;\r
  边界半径：50％;\r
  背景色：#FFF;\r
  不透明度：0.6;\r
  位置：绝对的;\r
  顶部：0;\r
  左：0;\r
  变换：翻译（100像素，300像素）;\r
  动画：反弹2S无限易于在出;\r
}\r
.loading：{后\r
  动画延迟：-1s;\r
}\r
@keyframes反弹{\r
  0％，100％{\r
    变换：规模（0）翻译（100像素，300像素）;\r
  }\r
  50％{\r
    变换：规模（1）翻译（100像素，300像素）;\r
  }\r
}

\r

＆LT;脚本SRC =htt​​ps://cdnjs.cloudflare.com/ajax /libs/$p$pfixfree/1.0.7/$p$pfixfree.min.js\"></script>\r
＆LT; D​​IV CLASS =加载＆GT;＆LT; / DIV＆GT;

\r

\r

\r

我写了一个类似的答案here一个有关的元素添加多个动画，每个这些动画修改的质疑变换属性的值相互独立。我在这里连接起来，仅供参考，不认为他们是重复的。

---

说了上面，加入原转化为每个动画的kefyrames当你试图创建动画库或试图每个动画分割成一个单独的类是不可能的。比方说，您要添加相同反弹动画多个元素和他们每个人都有不同的初始变换然后设置就不可能将它添加到动画的关键帧。

在这种情况下，你仍然可以使用CSS实现所需的输出，但它会（在我看来几乎是不可能的），很难获得其与一个单一的元素来完成的。

你有什么选择？好了，一个选择是为你增添一个包装元素的动画。

\r

\r

.loading-包装{\r
  位置：相对;\r
  宽度：200像素;\r
  高度：200像素;\r
  背景：#eee;\r
}\r
.loading-之前，.loading-后{\r
  位置：绝对的;\r
  宽度：50％;\r
  高度：50％;\r
  顶：0像素;\r
  左：0像素;\r
  动画：反弹2S无限易于在出;\r
}\r
.loading-前：之前，.loading-后：前{\r
  内容：;\r
  宽度：100％;\r
  高度：100％;\r
  边界半径：50％;\r
  背景色：#FFF;\r
  不透明度：0.6;\r
  位置：绝对的;\r
  顶部：0;\r
  左：0;\r
  变换：翻译（100像素，300像素）;\r
}\r
.loading-后{\r
  动画延迟：-1s;\r
}\r
@keyframes反弹{\r
  0％，100％{\r
    变换：规模（0）;\r
  }\r
  50％{\r
    变换：规模（1）;\r
  }\r
}

\r

＆LT;脚本SRC =htt​​ps://cdnjs.cloudflare.com/ajax /libs/$p$pfixfree/1.0.7/$p$pfixfree.min.js\"></script>\r
＆LT; D​​IV CLASS =加载-包装＆GT;\r
  ＆LT; D​​IV CLASS =搬入之前＆GT;＆LT; / DIV＆GT;\r
  ＆LT; D​​IV CLASS =加载-后＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

---

解决方案是的是通用并您可以将它应用于几乎所有这类案件。其缺点是，如果你想堆叠多个这种转变那么你很可能有多个这样的包装结束。还有比动画的关键帧也将在原来的转换之间没有纯粹的CSS方法。

以下代码段是另一个样。

\r

\r

.move正大规模{\r
  位置：相对;\r
  高度：100像素;\r
  宽度：100像素;\r
  背景：黄褐;\r
  边框：1px的固体巧克力;\r
  变换：规模（0.5）;\r
  动画：招1秒线性无极交替扭转;\r
}\r
.move {\r
  位置：相对;\r
  显示：inline-block的;\r
  动画：移动-1S仅无限线性复用反向;\r
}\r
.scale {\r
  位置：绝对的;\r
  高度：100像素;\r
  宽度：100像素;\r
  顶：0像素;\r
  左：0像素;\r
  背景：黄褐;\r
  边框：1px的固体巧克力;\r
  变换：规模（0.5）;\r
}\r
@keyframes举动{\r
  从{\r
    变换：translateX（0像素）的规模（0.5）;\r
  }\r
  至 {\r
    变换：translateX（300像素）的规模（0.5）;\r
  }\r
}\r
@keyframes仅布展{\r
  从{\r
    变换：translateX（0像素）;\r
  }\r
  至 {\r
    变换：translateX（300像素）;\r
  }\r
}

\r

＆LT;脚本SRC =htt​​ps://cdnjs.cloudflare.com/ajax /libs/$p$pfixfree/1.0.7/$p$pfixfree.min.js\"></script>\r
＆LT; D​​IV CLASS ='移动正大规模'＆GT;＆LT; / DIV＆GT;\r
＆LT; D​​IV CLASS ='移动'＆GT;\r
  ＆LT; D​​IV CLASS ='规模'＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

这篇关于动画变换只有一个属性（等级）覆盖其他（翻译）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！