使用 CSS 动画属性 class 上的多个 CSS 变换

Question

当 .move class 仅使用 CSS 添加到 .box 时，如何激活 CSS 动画？动画应该首先平移，当平移完成后，旋转应该从平移结束的地方开始。另外，如何使动画的结束状态保持在 100%，并在删除 .move class 时重置为 0%？

$(".test").click(function(){
 $(".box").toggleClass("move")
});

body{
  padding: 45px;
}

.test{
  margin-top: 15px;
}

.box{
  height: 45px;
  width: 45px;
  background: black;
}

.move{
  background: blue;
}

.box{
  animation: slide 0.5s, rotate 0.5s;
  animation-delay: 0s, 0.5s;
}

@keyframes slide{
  100%{
    transform: translateX(450px);
  }
}

@keyframes rotate{
  100%{
    transform: rotate(45deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  
</div>
<button class="test">Toggle</button>

Answer 1

这可能会使您尝试做的事情有点无效，但您设置了两次转换 - 如果您需要在一个元素上定位多个转换属性，则需要在一个转换声明中执行此操作，如下所示：

.box{
  animation: boxStuff 0.5s
}

@keyframes boxStuff{
  100%{
    transform: translateX(450px) rotate(45deg);;
  }
}

否则，无论哪个更靠下，都会压倒另一个。也许您可以使用边距或其他东西代替 translateX 来解决这个问题？

对于你问题的另一半，你应该能够将其添加到 .move class 以停止在最后一个动画帧上，直到移动 class 被删除。

animation-fill-mode: forwards;

Answer 2

看来您要找的是基于transition的解决方案，而不是animation（除非我误解了您要找的内容，否则请发表评论）：

$(".test").click(function(){
  $(".box").toggleClass("move")
});

.test, .box {
  margin-top: 15px;
}
.box {
  height: 45px;
  width: 45px;
  background: black;
  position: relative;
  left: 0;
  transition: left 5s, transform 5s linear 5s;
}
.box.move {
  background: blue;
  left: 450px;
  transform: rotate(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  
</div>
<button class="test">Toggle</button>

Answer 3

如果我没理解错的话，这就是你想要的结果。

<a class="test">Toggle</a>
<div class="box"></div>

.box {
   width: 200px;
   height: 200px;
   margin-left: 0;
   background: gold;
   transform: rotate(0deg);
   transition:  transform .3s 0s, margin .3s .3s;
}

.move {
   margin-left: 50px;
   transform: rotate(45deg);
   transition: margin .3s 0s, transform .3s .3s;
}

这里是 fiddle https://jsfiddle.net/VilleKoo/owsm0f7h/1/

Answer 4

这可以通过在元素上设置多个转换，结合 transition-delay 属性。

一个注意事项：由于每个转换都与属性一一对应，并且由于您对 "move" 和 "rotate" 使用变换属性 ] 操作，它不会像你写的那样工作。

对于 "move" 操作，我使用 margin-left 而不是转换属性。您可以使用任何方法，只要它是可动画的并且不会超载您用于其他转换之一的属性。

$(".test").click(function(){
  $(".box").toggleClass("move")
});

body {
  padding: 45px;
}
.test {
  margin-top: 15px;
}
.box {
  height: 45px;
  width: 45px;
  background: black;
  transition:
    margin-left 0.5s,
    transform 0.5s;
  /* delays for when the .move class was just removed */
  transition-delay: 0.5s, 0s;
}
.box.move {
  background: blue;
  margin-left: 450px;
  transform: rotate(45deg);
  /* delays for when the .move class was just added */
  transition-delay: 0s, 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  
</div>
<button class="test">Toggle</button>

你也可以直接在转场中指定延迟shorthand属性，像这样。

/* transitions for when the .move class was just removed */
transition:
  margin-left 0.5s 0.5s,
  transform 0.5s 0s;

Answer 5

您可以通过将它们放在一起来添加多个变换：

transform:translateX(450px) rotate(45deg);

要使用关键帧动画执行此操作，您需要将所有阶段作为单个动画执行。您需要将动画应用于 .move class 并设置 animation-fill-mode: forwards 以保留最后一帧，直到 class 被移除。

$(".test").click(function(){
 $(".box").toggleClass("move")
});

body{
  padding: 45px;
}

.test{
  margin-top: 15px;
}

.box{
  height: 45px;
  width: 45px;
  background: black;
}

.move{
  background: blue;
  animation: slide 1s;
  animation-fill-mode: forwards;
}


@keyframes slide{
  50%{
    transform: translateX(450px);
    
  }
  100%{
    transform:translateX(450px) rotate(45deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  
</div>
<button class="test">Toggle</button>

使用 CSS 动画属性 class 上的多个 CSS 变换

Multiple CSS Transforms on class change using the CSS animation property

html

css

css-transitions

css-transforms

使用 CSS 动画 属性 class 上的多个 CSS 变换

Multiple CSS Transforms on class change using the CSS animation property

html

css

css-transitions

css-transforms

使用 CSS 动画属性 class 上的多个 CSS 变换