扩展已翻译元素的第一个动画的最终状态
芮瑾瑜
问题内容：
问题答案：
我知道这里多次被问到，但是我要求为这种动画使用不同的方法。
问题：
第二个框具有多个动画，试图创建与第一个相同的效果。似乎transform属性正在被覆盖 （应有）*
。我正在尝试使用第二动画的属性扩展（第二盒子的）第一动画。尝试使用animation-fill-mode: forwards但没有成功。也许我缺少一些基本的东西。香草CSS可能吗？
- 参考
“ animation-name”属性定义了适用的动画列表。如果多个动画试图修改同一属性，则最接近名称列表末尾的动画获胜。
需求：
单独的规则move2-right和move2-down关键帧规则，但是在同一个元素上起作用，保留了第一个动画转换。如果有另一种方法可以处理这种动画，请指导我。
电流输出：
.animation-1,
.animation-2 {
width: 200px;
height: 200px;
display: inline-block;
background: white;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.movable-1,
.movable-2 {
background: #41A186;
width: 50px;
height: 50px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
text-align: center;
vertical-align: middle;
line-height: 50px;
}
.movable-1 {
-webkit-animation-name: move1;
animation-name: move1;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.movable-2 {
-webkit-animation-name: move2-right, move2-down;
animation-name: move2-right, move2-down;
-webkit-animation-duration: 2s, 2s;
animation-duration: 2s, 2s;
-webkit-animation-delay: 4s, 6s;
animation-delay: 4s, 6s;
-webkit-animation-fill-mode: forwards, forwards;
animation-fill-mode: forwards, forwards;
}
@-webkit-keyframes move1 {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
100% {
-webkit-transform: translateX(30px) translateY(50px);
transform: translateX(30px) translateY(50px);
}
}
@keyframes move1 {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
100% {
-webkit-transform: translateX(30px) translateY(50px);
transform: translateX(30px) translateY(50px);
}
}
@-webkit-keyframes move2-right {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
100% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
}
@keyframes move2-right {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
100% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
}
@-webkit-keyframes move2-down {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
100% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
}
@keyframes move2-down {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
100% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
}
<div class="animation-1">
<div class="movable-1">1</div>
</div>
<div class="animation-2">
<div class="movable-2">2</div>
</div>
问题答案：
据我所知，这对于纯CSS是不可能的，因为（正如您已经指出的），当我们向已经具有转换的元素添加额外的转换规则时，整个转换会被重置，因为它会覆盖并且不会附加到现有的转换。
使用JS可能可以实现，但是即使那样也很难实现，因为我们必须执行以下操作：
animationend在第一个动画完成时处理事件。- 在处理程序中，
translateX(...)以像素为单位。 - 获取下一个动画的CSS关键帧规则，对其进行修改以将其
translateX(...)作为转换堆栈的第一部分。
注意： 我假设您遇到的情况是绝对没有办法使用问题中提到的第一种方法。
实现类似效果的另一种方法是为元素的margin或设置动画，position而不是使用transform: translate()。这种方法的主要缺点是，这不会在GPU层上完成（与不同transform），因此，当同时发生多个此类动画时，速度会变慢（并且可能会很昂贵）。
使用边距：
下面的代码段通过动画margin-left和margin-top属性达到效果。
.animation-1,
.animation-2,
.animation-3 {
width: 200px;
height: 200px;
display: inline-block;
background: white;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
vertical-align: middle;
}
.movable-1,
.movable-2,
.movable-3 {
background: #41A186;
width: 50px;
height: 50px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
text-align: center;
vertical-align: middle;
line-height: 50px;
}
.movable-1 {
animation-name: move1;
animation-duration: 4s;
animation-delay: 0s;
animation-fill-mode: forwards;
}
.movable-2 {
animation-name: move2-right, move2-down;
animation-duration: 2s, 2s;
animation-delay: 4s, 6s;
animation-fill-mode: forwards, forwards;
animation-timing-function: linear;
}
.movable-3 {
animation-name: move3-diagonal;
animation-duration: 4s;
animation-delay: 8s;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
@keyframes move1 {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(30px);
}
100% {
transform: translateX(30px) translateY(50px);
}
}
@keyframes move2-right {
0% {
margin-left: 0px;
}
100% {
margin-left: 30px;
}
}
@keyframes move2-down {
0% {
margin-top: 0px;
}
100% {
margin-top: 50px;
}
}
@keyframes move3-diagonal
{
0% {
margin-top: 0px;
margin-left: 0px;
}
100% {
margin-top: 50px;
margin-left: 30px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="animation-1">
<div class="movable-1">1</div>
</div>
<div class="animation-2">
<div class="movable-2">2</div>
</div>
<div class="animation-3">
<div class="movable-3">3</div>
</div>
使用位置：
该片段通过动画left和top属性达到相同的效果。子元素具有position: absolute。
.animation-1,
.animation-2,
.animation-3 {
width: 200px;
height: 200px;
display: inline-block;
background: white;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
position: relative;
}
.movable-1,
.movable-2,
.movable-3 {
background: #41A186;
width: 50px;
height: 50px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
text-align: center;
vertical-align: middle;
line-height: 50px;
position: absolute;
}
.movable-1 {
animation-name: move1;
animation-duration: 4s;
animation-delay: 0s;
animation-fill-mode: forwards;
}
.movable-2 {
animation-name: move2-right, move2-down;
animation-duration: 2s, 2s;
animation-delay: 4s, 6s;
animation-fill-mode: forwards, forwards;
animation-timing-function: linear;
}
.movable-3 {
animation-name: move3-diagonal;
animation-duration: 4s;
animation-delay: 8s;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
@keyframes move1 {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(30px);
}
100% {
transform: translateX(30px) translateY(50px);
}
}
@keyframes move2-right {
0% {
left: 0px;
}
100% {
left: 30px;
}
}
@keyframes move2-down {
0% {
top: 0px;
}
100% {
top: 50px;
}
}
@keyframes move3-diagonal {
0% {
top: 0px;
left: 0px;
}
100% {
top: 50px;
left: 30px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="animation-1">
<div class="movable-1">1</div>
</div>
<div class="animation-2">
<div class="movable-2">2</div>
</div>
<div class="animation-3">
<div class="movable-3">3</div>
</div>
注意： 如我在此处的答案所述，您当然可以添加包装元素并为其设置下移动画。这将产生与第一个相同的效果，但是我不建议采用这种方法，因为这与您的问题的重点相反（我认为是-如何将多个动画添加到同一个元素，并使第二个动画从何处开始第一个结束 ）。
.animation-1,
.animation-2 {
width: 200px;
height: 200px;
display: inline-block;
background: white;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.movable-1,
.movable-2 {
background: #41A186;
width: 50px;
height: 50px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
text-align: center;
vertical-align: middle;
line-height: 50px;
}
.movable-1 {
animation-name: move1;
animation-duration: 4s;
animation-delay: 0s;
animation-fill-mode: forwards;
}
.movable-2 {
animation-name: move2-right;
animation-duration: 2s;
animation-delay: 4s;
animation-fill-mode: forwards;
}
.movable-2-wrapper {
animation-name: move2-down;
animation-duration: 2s;
animation-delay: 6s;
animation-fill-mode: forwards;
}
@keyframes move1 {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(30px);
}
100% {
transform: translateX(30px) translateY(50px);
}
}
@keyframes move2-right {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(30px);
}
100% {
transform: translateX(30px);
}
}
@keyframes move2-down {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(50px);
}
100% {
transform: translateY(50px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="animation-1">
<div class="movable-1">1</div>
</div>
<div class="animation-2">
<div class='movable-2-wrapper'>
<div class="movable-2">2</div>
</div>
</div>
类似资料：
-
问题内容： 我想将当前目录的文件放在一个数组中，并使用此脚本回显每个文件： 输出： 有谁知道为什么在此for循环中仅打印第一个元素？ 问题答案： 扩展到数组的第一个元素。试试看，它只会打印数组的第一个元素。由于相同的原因，for循环仅打印一个元素。 要扩展到数组的所有元素，您需要编写为。 迭代Bash数组元素的正确方法：
-
本文向大家介绍Node.js Addons翻译(C/C++扩展)，包括了Node.js Addons翻译(C/C++扩展)的使用技巧和注意事项，需要的朋友参考一下 PS:请先升级Node 6.2.1，Node 升级命令 npm install -g n;n stable.NOde.js扩展是一个通过C/C++编写的动态链接库，并通过Node.js的函数require()函数加载，用起来就像使用一个
-
本文向大家介绍JavaScript数组中的第一个元素和最后一个元素？，包括了JavaScript数组中的第一个元素和最后一个元素？的使用技巧和注意事项，需要的朋友参考一下 数组是一组元素。每个元素都有其自己的 索引值。我们可以使用这些索引访问任何元素。但是，对于最后一个元素，直到知道数组中存在的元素数量，我们才知道索引。在这种情况下，我们必须使用逻辑。让我们简要地讨论这些细节。 访问第一个元素 因
-
1. 一个扩展的基本结构 2. 编译我们的扩展 3. 静态编译 4. 编写函数 5. 小结 每一个PHP扩展都至少需要两个文件：一个配置文件和一个源文件。配置文件用来告诉编译器应该编译哪几个文件，以及编译本扩展是否需要的其它lib。
-
本文会教你如何创建一个简单的 Cocos Creator 扩展包，并且向你介绍一些扩展包中的基本概念。通过学习，你将会创建一个扩展包，并在主菜单中建立一个菜单项，并通过该菜单项在主进程中执行一条扩展指令。 创建并安装扩展包 创建一个空文件夹命名为 “hello-world”，并在该文件夹中创建 main.js 和 package.json 两个文本文件。该扩展包的结构大致如下： hello-wor
-
我发现很多讲解编程的书籍，在前面都会详细地讲解相关的预备知识，而大多数读者却更希望马上进行实践。没错，人们总是对基础知识很排斥，这也就是为什么在教育行业开始推崇自顶向下的教材设计方案了——先让读者看到一个最接近表面的东西，之后再慢慢深入地讲解内在的原理和基础。所以我决定在还没有讲什么的时候，先带大家写一个Demo程序。这样不仅可以让大家在实践中对基础知识掌握得更加牢靠，同时也调动了大家的积极性。