html - 使用 CSS 动画属性对类更改进行多个 CSS 转换

Question

当 .move 类仅使用 CSS 添加到 .box 时，如何激活 CSS 动画？动画应该首先平移，当平移完成后，旋转应该从平移结束的地方开始。另外，当 .move 类被移除时，如何使动画的结束状态保持 100% 并重置为 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

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

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

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

$(".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>