Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)

Recently, I updated my portfolio (johnrhea.com – check it out if you need a front-end engineer with animation and storytelling skills!). I repurposed some planetary animations from a past project. Initially, I just integrated them, scaling them using viewport units (a feat of mathematical prowess I was quite proud of!). However, on mobile, a subtle vertical jitter appeared during the moon's orbit. This led me to optimize the animation, resulting in this article.

Here's the original, unwieldy animation (141 lines!):

View Original Code

```

moon1 {

animation: moon-one 60s infinite; }

@keyframes moon-one { / ... (Original 141-line keyframes omitted for brevity) ... / }

The keyframes were unnecessarily repeated five times.  By reducing the animation duration to 12 seconds and removing redundant code, I trimmed it to 36 lines:

moon1 {

animation: moon-one 12s infinite; }

@keyframes moon-one { / ... (36-line optimized keyframes omitted for brevity) ... / }

<code>
Further optimization involved simplifying keyframe percentages (0%, 25%, 50%, 75%, 100%) and rounding viewport units to the nearest tenth.  This resulted in:
</code>

moon1 {

animation: moon-one 12s infinite; }

@keyframes moon-one { / ... (Shorter optimized keyframes omitted for brevity) ... / }

<code>
The next improvement involved separating `translate` and `scale` from the `transform` property into individual properties.  This allowed for more control and smoother animation.  Unnecessary `translate` properties were removed, letting browser interpolation handle smooth transitions.
</code>

moon1 {

animation: moon-one 12s infinite; }

@keyframes moon-one { / ... (Further optimized keyframes omitted for brevity) ... / }

<code>
Finally, I standardized the animation timing function to `ease-in-out` for a more consistent and natural look.  The final, concise code (28 lines):
</code>

moon1 {

animation: moon-one 12s infinite ease-in-out; }

@keyframes moon-one { 0%, 100% { translate: 0 0; scale: 1; z-index: 2; } 25% { scale: 1.5; } 49.9% { z-index: 2; } 50% { translate: -5vw 6.5vw; scale: 1; z-index: -1; } 75% { scale: 0.25; } 99.9% { z-index: -1; } }

<code>

The animation now looks improved and is significantly more maintainable.  What optimization steps did I miss?  Let me know in the comments!</code>

The above is the detailed content of Orbital Mechanics (or How I Optimized a CSS Keyframes Animation). For more information, please follow other related articles on the PHP Chinese website!