CSS 57 💻 animation properties part 2

a - animation-fill-mode and animation-play-state
animation-fill-mode  is used to define the styles applied to an element before and after the animation plays.
values: none → No styles are applied before or after the animation.
forwards → computed values are kept by the element after the animation ends. 
backwards → computed values are applied to the element as soon as the animation starts, and before the animation actually begins playing. 
both → Combines both forwards and backwards
animation-fill-mode: forwards; → the box will remain at its final position (translated 200px right) and in its final color (red) after the animation ends.
animation-play-state  allows you to control whether an animation is running or paused
values: running → The animation is currently playing.
  paused → The animation has been paused, and it will not continue until it is resumed.
animation-play-state: paused; → stops the animation

b - animation-timeline and animation-composition
animation-timeline allows you to specify a timeline that controls the timing of animations instead of using the default document timeline
values: none → no association with a timeline
  scroll() → Binds the animation to the scroll timeline.
view() → Creates an animation timeline that is based on the visibility of an element within the viewport.
animation-timeline: scroll() → ensures that the animation progresses in sync with the scrolling position.
animation-composition controls how multiple animations that target the same properties on a single element combine their effects.
values: replace → (default) New animations will overwrite previous ones.
add → New animations will add to the effect of existing animations.
  accumulate → Similar to add, but with additional rules for handling keyframes and timing functions.
animation-composition: add; → adds to the effects of other animations without replacing them.

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!