Multiple CSS Transforms on class change using the CSS animation property

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>

JustH · Accepted Answer · 2016-07-06 20:37:35Z

3

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>

edited Jul 6, 2016 at 20:37

answered Jul 6, 2016 at 20:22

JustH

1,4029 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mmgross Over a year ago

While your solution is a good one, you could still work on the presentation: Why would you include all the CSS but no HTML or JS to have a working snippet and eliminate the need to link to an external site?

Woodrow Barlow Over a year ago

i like this answer better than the others (including mine!) because it doesn't require replacing the transform: translateX(450px) with something else like margin-left: 450px.

JustH Over a year ago

@WoodrowBarlow thanks! Yeah, while margin-left produces the same result in this example, depending on what else is going on on the page it could cause layout problems, so there could be a reason it needs to be translateX

Woodrow Barlow · Accepted Answer · 2016-07-06 20:21:54Z

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;

TheThirdMan · Accepted Answer · 2016-07-06 22:19:27Z

1

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>

edited Jul 6, 2016 at 22:19

answered Jul 6, 2016 at 19:11

TheThirdMan

1,5221 gold badge16 silver badges31 bronze badges

1 Comment

takeradi Over a year ago

what i want is for the translate to happen first. once its reached the end, the rotate should start

will · Accepted Answer · 2016-07-06 19:03:28Z

0

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;

answered Jul 6, 2016 at 19:03

will

2,0071 gold badge14 silver badges19 bronze badges

1 Comment

takeradi Over a year ago

Can I not make the box translate first and then make it rotate?

VilleKoo · Accepted Answer · 2016-07-06 20:00:32Z

0

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/

answered Jul 6, 2016 at 20:00

VilleKoo

2,8542 gold badges16 silver badges26 bronze badges

Collectives™ on Stack Overflow

Multiple CSS Transforms on class change using the CSS animation property

5 Answers 5

3 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related