CODEWITHSUNDEEP
csscss-animationskeyframe
Eric Gonzalo
Eric Gonzalo

Reputation: 301

Is 0% translateX(0) necessary?

I was just wondering if it was necessary to include the transform: translateX(0); that you see in the keyframe down below. 

@keyframes looper {
  0% {transform: translateX(0);}
  100% {transform: translateX(-1337px);}
}

It seems like it would be better practice not to include it, as the animation will always start at the origin of wherever the element is being animated. If I remove the 0%, my animation is still the same as if I had included the starting frame. Yet, in various examples that I've seen online, people have included it in their animations.

Obviously, if you want to offset your element by a specific amount, then you would put a different value in the 0% transform. Do people include translateX(0) to be safe about their animation starting points or as a best practice?

Upvotes: 1

Views: 2394

Answers (1)

Derek
Derek

Reputation: 112

Most of the time, it's included to be safe, as you've already gathered. I've mainly seen it in tutorials where they're trying to be extra explicit so that new learners understand why whatever's happening is happening.

That being said, it's always better to be more clear than less clear. You don't know for certain that all browsers will respect that assumption so it's better to include it.

Upvotes: 1

Related Questions