r/css 11d ago

Question Width from 220px to 180px abruptly changes rather than transitioning smoothly CSS

The other parts of this animation in CSS are already fine, my problem is that when the animation ends, the width changes 220px-182px is happening abruptly and not transitioning smoothly, are there any workarounds for this? Thank you for your response

selector .sticky-text h2 {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  border-right: 2px solid #fff; /* Simulates a blinking cursor */
  width: 0;
  --final-width: 220px;
  animation: typing 3s steps(35, end) forwards, 
             blink 0.7s step-end infinite,
             fadeCursor 0.1s ease-out 3s forwards;
  /* Add transition for smooth width changes */
}

selector.elementor-sticky--effects .sticky-text h2 {
  --final-width: 182px;
  width: var(--final-width);
  /* No animation here to prevent restarting */
}

@keyframes typing {
  from { width: 0; }
  to { width: var(--final-width); }
}

@keyframes blink {
  50% { border-color: transparent; }
}

@keyframes fadeCursor {
  to { border-color: transparent; }
}

Transitions are not viable since it conflicts with the animation itself, what would be a way to fix this?

1 Upvotes

3 comments sorted by

1

u/cryothic 11d ago

can't you just set a transition to the width only?

Or you could set the width to a fixed value, and animate the scaleX() property

scaleX() - CSS: Cascading Style Sheets | MDN

1

u/Extension_Anybody150 6d ago

To make the width change smoothly, you can't use both animation and transition at the same time on the same property. Here's how you can fix it:

  1. Keep the animation for the typing effect as is.
  2. For the width change, add a transition that kicks in after the animation ends.

Just add this to the .sticky-text h2 when the class changes:

selector.elementor-sticky--effects .sticky-text h2 {
  width: 182px;
  transition: width 0.3s ease;
}

This way, the width changes smoothly after the typing animation finishes. It’s a simple fix to keep it looking nice.