Kevin Powell - Community•2y ago

animation

I don't understand why is it that square isn't doing a 360deg rotation but instead it goes back up -100px on the y-axis https://codepen.io/pen/?editors=1100

CodePen

...

8 Replies

NazCodelandOP•2y ago

can someone explain to me what's happening please

Unknown User•2y ago

Message Not Public

MarkBoots•2y ago

ah yea, you forgot to save the pen, it will generate a custom link going of on your question, you are probably doing a rotation transition/animation on a tansform property that was already used for a translate, you'll need to repeat the translate when doing the rotation

NazCodelandOP•2y ago

darn 1 second https://codepen.io/bbonsaye/pen/dyjaNpG?editors=1100 yeah @markboots. I think that's what's happening, in a new pen, I've tried doing something to repeat it but it's giving me an unexpected result ( a cool animation though xD)

MarkBoots•2y ago

something like this

div{
  transform: translate(100px, 100px);
  animation: rotate 2s linear
}
@keyframes rotate{
  to { 
    transform: translate(100px, 100px) rotate(360deg);
  }
}

div{
  transform: translate(100px, 100px);
  animation: rotate 2s linear
}
@keyframes rotate{
  to { 
    transform: translate(100px, 100px) rotate(360deg);
  }
}

if you have used a transform on the original, youll have to repeat the same value in the animation

NazCodelandOP•2y ago

ok let me try that

MarkBoots•2y ago

this should do for you

.shape {
  inline-size: 40px;
  block-size: 40px;
  position: absolute;
}

.shape:hover {
  transform-origin: 0 100px;
  animation: rotate 5s linear infinite;
}

.square {
  background-color: orange;
  --ty: 100px;
  transform: translateY(var(--ty))
}

.circle {
  background-color: skyblue;
  border-radius: 50%;
}

@keyframes rotate {
  to {  
    transform: translateY(var(--ty, 0)) rotate(360deg)
  }
}

.shape {
  inline-size: 40px;
  block-size: 40px;
  position: absolute;
}

.shape:hover {
  transform-origin: 0 100px;
  animation: rotate 5s linear infinite;
}

.square {
  background-color: orange;
  --ty: 100px;
  transform: translateY(var(--ty))
}

.circle {
  background-color: skyblue;
  border-radius: 50%;
}

@keyframes rotate {
  to {  
    transform: translateY(var(--ty, 0)) rotate(360deg)
  }
}

the rotate animation does the translateY for the square (or 0 in case of the circle) and then the rotate for both im using a custom variable to pass the translateY value of the square

NazCodelandOP•2y ago

the link I sent, I managed to do sort of, it but I had to create 2 keyframe animations, but the square rotation seems way bigger I'll take a look at your solution right now your solution works for the square, instead of it doing a 360deg downwards, I changed its transition-origin to -100px and it's giving me a much wider circle for some reason for the square a transform-origin: 0 -50px; brings it much closer but it's still off by a bit, but I wonder why -100px doesn't work

Gaming

Programming

animation