Trigger second animation keyframe (or move div permanently) with CSS animations? - css

Question

I've tried searching for a solution to this problem, but haven't found one yet.
What I'm trying to do is simple:
When I click one button, I'd like a box to move 200px to the right with CSS transitions. When I click a second button, I'd like the box to move 200px down from the position it is currently in.
I have this basic code here:
HTML
<button class="one">First</button>
<button class="two">Second</button>
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 2s;
}
.box.transOne {
transform: translateX(200px);
}
.box.transTwo {
transform: translateY(200px);
}
JS
$(".one").click(function() {
$(".box").toggleClass("transOne");
});
$(".two").click(function() {
$(".box").toggleClass("transTwo");
})
However, when I click on button number two, the box does move 200 down, but it moves diagonally back to the first X axis position while it's going down (I.e. it doesn't stay 200px over on the X axis).
Is there a way I can possibly do this with keyframes? Like triggering a second keyframe with a second button click, etc. Or is there a better way? I'm pretty stumped and can't find any solutions, so any help is much appreciated. Thanks!

Answer 1

SHORT ANSWER
set the translation X in class .transTwo too
.box.transTwo {
transform: translate(200px 200px);
}
EXPLANATION
the transform is overriding the others, this is the nature behaviour of the css, just like other property color, background-color,
The basic rule is the latest property set is the strongest, the strongest is at inline style unless you implement !important