Kevin Powell - Community•5mo ago

@keyframes steps difference

Hey, Is there a difference between these two keyframes? Does the to and from mean something different compared to the percentages?

@keyframes xyz {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes xyz {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes xyz {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes xyz {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

Thanks in advance.

6 Replies

Lamer of Sweden•5mo ago

It is the same.

snxxwyyOP•5mo ago

Alright, thank you

Lamer of Sweden•5mo ago

Recommend checking out https://www.joshwcomeau.com/animation/keyframe-animations/ And later head over to https://cubic-bezier.com for an interactive cubic-beizer-maker.

An Interactive Guide to Keyframe Animations

CSS keyframe animations are incredibly flexible and powerful, but they’re also a bit weird. In this deep-dive tutorial, we'll learn how CSS keyframes work from the ground up, and see how to use them to build high-quality animations.

snxxwyyOP•5mo ago

oh sweet, thanks, i'll check them out

ἔρως•5mo ago

think of to as a more readable 100%, and from as a more readable 0%, because thats what they are

snxxwyyOP•5mo ago

Ah okay, thank you

Gaming

Programming

@keyframes steps difference