那些遇到过的问题

扩展翻译元素的第一个动画的最终状态

Man*_*mar 6 css css3 css-transforms css-animations

我知道这里有多次询问,但我要求为这种动画设置不同的方法.

问题:

第二个框有多个动画,试图创建与第一个相同的效果.似乎转换属性被覆盖(因为它应该)*.我正在尝试使用第二个动画的属性扩展第一个动画(第二个框).试图使用animation-fill-mode: forwards但没有成功.也许我错过了一些基本的东西.是否可以使用vanilla 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);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="animation-1">
  <div class="movable-1">1</div>
</div>
<div class="animation-2">
  <div class="movable-2">2</div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是一个你可以玩的小提琴:JSfiddle

Har*_*rry 4

据我所知，这对于纯 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;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

使用位置：

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;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

注意：正如我的回答中所述，您当然可以添加一个包装元素并为其设置下移动画。这会产生与第一个相同的效果，但我并不建议这种方法，因为它违背了你的问题的要点（在我看来，如何将多个动画添加到同一元素并使第二个动画从哪里开始）第一期结束）。

.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);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

342 次

最近记录：

10 年，8 月 前
动画变换只有一个属性(比例)覆盖其他(翻译) 5
更多相关链接
相关归档
使用Bootstrap 3如何隐藏表格中的列？ 28
Google Chrome"解析SourceMap失败":css.map(Web Essential) 28
CSS背景图像不显示 27
当我在CSS文件中开始新注释时,如何阻止Visual Studio自动添加注释结束字符 26
CSS放在名称的圆圈第一个字母中 20
使用CSS组元素 12
Firefox中Flexbox中的垂直滚动渲染问题 7
不对称的CSS阴影 5
是否有可能拒绝通过Microsoft Ajax Minifier在css文件中缩小一行(或区域)？ 4
Modernizr不适用于IE9中的"列数" 3
难疑归档
使用jQuery为复选框设置"选中"？ 3988
如何判断Bash中是否存在常规文件？ 3069
检查字典中是否已存在给定键 2683
迭代字典的最佳方法是什么？ 2455
可以(a == 1 && a == 2 && a == 3)评估为真吗？ 2438
将Git分支合并到master中的最佳(也是最安全)方法是什么？ 1977
获取屏幕大小,当前网页和浏览器窗口 1927
int32的最大值是多少？ 1383
"this"关键字如何运作？ 1243
如何检查字符串是否包含Objective-C中的另一个字符串？ 1200