Multiple CSS Transforms on class change using the CSS animation property - html

Question

How do I activate the CSS animation when the .move class is added to the .box using only CSS? The animation should translate first and when the translate has finished the rotate should begin where the translate ended. Also, how do I make the end state of the animation to be persistent at 100% and reset to 0% when the .move class is removed?
$(".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

You can add multiple transforms by placing them together:
transform:translateX(450px) rotate(45deg);
To do this with a key-frame animation, you want to do all stages as a single animation. You will want to apply the animation to the .move class and set animation-fill-mode: forwards to persist the last frame until the class is removed.
$(".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>

Answer 2

That is possible by setting multiple transitions on the element, combined with the transition-delay property.
One note: since each transition has a one to one correspondence to a property, and since you are using the transform property for both the "move" and "rotate" operations, it won't work the way you've written it.
For the "move" operation, I am using margin-left rather than the transform property. You can use any method, as long as it is animatable and doesn't overload a property that you are using for one of the other transitions.
$(".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>
You can also specify the delay directly in the transition shorthand property, like this.
/* transitions for when the .move class was just removed */
transition:
margin-left 0.5s 0.5s,
transform 0.5s 0s;

Answer 3

It seems what you're looking for is a solution based on transition, not animation (unless I misunderstand what you're looking for, in which case please comment):
$(".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 4

This may kinda invalidate what you're trying to do, but you're setting transform twice - if you need to target multiple transform properties on one element, you need to do it in one tranform declaration, like this:
.box{
animation: boxStuff 0.5s
}
#keyframes boxStuff{
100%{
transform: translateX(450px) rotate(45deg);;
}
}
Otherwise whichever is further down is just overriding the other. Maybe you can use a margin or something instead of translateX to work around this?
For the other half of your question, you should be able to add this to the .move class to stop on the last animation frame until the move class is removed.
animation-fill-mode: forwards;

Answer 5

If I understood you correctly, this is the result you want.
<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;
}
and here's a fiddle https://jsfiddle.net/VilleKoo/owsm0f7h/1/