how to CSS3 transform and rotate only at the end

Question

I am trying to have a block of DIV to move to the right by 300px, THEN rotate about the Y axis by 180deg, move back to the origin X position, then rotate about the Y axis by 180deg.

 |-->---->----->------|
rotate             rotate
 |----<-----<-----<---|

What I have now rotates and moves at the same time. Is there any way I can define these transformations step by step?

http://jsbin.com/nomuqe/edit?html,css,output

Thank you!

vals · Accepted Answer · 2015-11-10 14:57:24Z

1

You need to set more keyframes with the required values.

Since you want to make the rotation keeping the same position (translation), you need to set 2 keyframes with the same translate value and changing only the rotation

.test{
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 20px 0 0px 20px;
  background: orange; 
  animation: move 4s infinite;
}
@keyframes move{
  0%{
    transform: translateX(0px)  rotateY(0deg);
  }
  49%{
    transform: translateX(300px) rotateY(0deg);
  }
  50%{
    transform: translateX(300px) rotateY(180deg);
  }
  100%{
    transform: translateX(0px) rotateY(180deg);
  }
}

  <div class='test'></div>

edited Nov 10, 2015 at 14:57

answered Nov 10, 2015 at 14:38

vals

64k11 gold badges96 silver badges150 bronze badges

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

2 Comments

Nik So Over a year ago

Hi Vals! Thanks for the quite answer! Can you explain also why both 49 and 50% have the translateX(300px?)

vals Over a year ago

Added more detail in the answer

Collectives™ on Stack Overflow

how to CSS3 transform and rotate only at the end

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related