How to animate a rolling rectangle

Question

I'd like to animate a rectangle to roll from the left of the screen to the right of the screen. Please notice that the transform-origin point should not be in the center of the rectangle, but in the bottom-right corner, so that it doesn't overpass the "hr" line or bounce in any way.

This is what I have achieved untill now, but I'd like it to move continuously untill it gets to the right edge of the screen:

hr {
  margin: 0;
}

div {
  width: 135px;
  height: 135px;
  box-shadow: inset 0 0 10px #000000;
  transform-origin: right bottom;
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

<div></div>
<hr>

score 4 · Accepted Answer · answered Feb 05 '18 at 10:12

You need to change the transform origin as you go :

hr {
  margin: 0;
}

div {
  width: 135px;
  height: 135px;
  box-shadow: inset 0 0 10px #000000;
  transform-origin: right bottom;
  animation-name: move;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  margin-top: 20px;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  transform-origin: right bottom;
  }
  25% {
    transform: rotate(90deg);
  transform-origin: right bottom;
  }
  25.1% {
    transform:   translate(100%, 100%) rotate(90deg);
    transform-origin: top right;
  }
  50% {
    transform:  translate(100%, 100%) rotate(180deg);
    transform-origin: top right;
  }
  50.1% {
    transform: translate(300%, 100%) rotate(180deg);
    transform-origin: left top;
  }
  75% {
    transform: translate(300%, 100%) rotate(270deg);
    transform-origin: left top;
  }
  75.1% {
    transform: translate(400%, 0%) rotate(270deg);
    transform-origin: left bottom;
  }
  100% {
    transform: translate(400%, 0%) rotate(360deg);
    transform-origin: left bottom;
  }
}

<div>TEST</div>
<hr>

i was going with this configuration at first and go mad finding the correct transalation :) great one ! — Temani Afif, Feb 05 '18 at 10:15

Temani Afif · Answer 2 · 2018-02-05T10:28:53.463

3

Interesting, I would consider adding a translation and the trick is to switch fastly between two states to be able to continue the move.

You are rotating your element with 90deg which is equivalent in your case to a translation by the width of the element if we only consider the final state so switching fastly between both situation won't be visible and thus you can rotate your element again and repeat the same trick until your reach the needed position.

hr {
  margin: 0;
}

div {
  width: 135px;
  height: 135px;
  box-shadow: inset 0 0 10px #000000;
  transform-origin: right bottom;
  animation-name: move;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  25.01% {
    transform: translateX(calc(1 * 135px)) rotate(0deg);
  }
  50% {
    transform: translateX(calc(1 * 135px)) rotate(90deg);
  }
  50.01% {
    transform: translateX(calc(2 * 135px)) rotate(0deg);
  }
  75% {
    transform: translateX(calc(2 * 135px)) rotate(90deg);
  }
  75.01% {
    transform: translateX(calc(3 * 135px)) rotate(0deg);
  }
  100% {
    transform: translateX(calc(3 * 135px)) rotate(90deg);
  }
}

<div></div>
<hr>

edited Feb 05 '18 at 10:28

answered Feb 05 '18 at 09:23

Temani Afif

245,468
26
309
415

@VXp pay attention with the values ... using very small value like you did won't work in all the cases .. it's not working on chrome when tested – Temani Afif Feb 05 '18 at 10:16
Wrong, working just fine with me, also Chrome. Current values are not appropriate. – VXp Feb 05 '18 at 10:20
@VXp strange ... it tested and it's not working for me .. i also faced the same issue before when i tried to use values under 0.1 ... well i have decreased them to 0.1 instead of 0.5 i think it's better .. and i will see what is happening on my side – Temani Afif Feb 05 '18 at 10:22
I ran it multiple times without any problems whatsoever, strange indeed. – VXp Feb 05 '18 at 10:23
@VXp well it's working fine now :/ not sure what was the issue .. maybe a browser bug that create a kind of flickering – Temani Afif Feb 05 '18 at 10:28
Could be, saw it once at first but then no more, probably has to "store" it the first time which can cause flickering. – VXp Feb 05 '18 at 10:31

How to animate a rolling rectangle

2 Answers2