1

A CSS transition can be used to trigger an animation of a CSS property when said property changes. A CSS animation can be used to animate multiple properties at the same time.

Is there a way to combine these, so that when some CSS property changes, it triggers an animation of not just itself, but other properties as well?

My concrete use case would be the following: I have a bunch of small images that I combined into one big image, and I use object-position to show various parts of it. I would like to create a CSS animation such that when I change the object-position, the image's opacity would first go to 0%, then the object-position would change, and then the opacity would go back to 100%. I can easily formulate this as an animation, but I don't know how to trigger it from the object-position change.

Cactus
  • 27,075
  • 9
  • 69
  • 149
  • Maybe I misunderstood something, but transitions can be used for multiple properties: `transition: 1s background-color ease-in, 0.3s color ease-out, 5s border-width ease-in-out;` – Nakarukatoshi Uzumaki Oct 27 '21 at 09:53
  • @NakarukatoshiUzumaki: sure, but only one of the properties actually changes in the DOM (in your example, I change only `background-color`, but `border-width` should still animate) – Cactus Oct 27 '21 at 09:55
  • 3
    you cannot, this is too much for CSS, you need JS – Temani Afif Oct 27 '21 at 09:58
  • @Cactus you can animate it indeed. Hover on Hello World: https://jsfiddle.net/3jgh92wp/ – Nakarukatoshi Uzumaki Oct 27 '21 at 10:02
  • @NakarukatoshiUzumaki but in that example, your `h1:hover` style really does change e.g. `border-width`. I am asking about a situation where e.g. `border-width` would not change at either end of the animation, yet it would be animated (imagine the border growing and then shrinking back to its original width). – Cactus Oct 27 '21 at 10:03
  • @Cactus if you stop hovering, it returns to its normal value... I think I'm not getting your point, sry – Nakarukatoshi Uzumaki Oct 27 '21 at 10:04
  • @TemaniAfif and what would a JS solution look like? It's not enough to just set the `animation` style, because the endpoint also needs to match whatever value I am setting – Cactus Oct 27 '21 at 10:06
  • 1
    check this: https://stackoverflow.com/a/20683311/8620333 you need to watch the CSS change and apply what you want in some cases – Temani Afif Oct 27 '21 at 10:08
  • @TemaniAfif: OK, but what WOULD I apply to run the `animation` with the right endpoints? Should I generate the keyframes object itself at runtime instead of storing it statically in the stylesheet? – Cactus Oct 27 '21 at 10:09
  • 1
    Use a CSS variable: https://stackoverflow.com/a/51580959/8620333 – Temani Afif Oct 27 '21 at 10:19
  • @TemaniAfif thanks, yeah I figured the same in the meantime -- the animation should have CSS variables as endpoints, then I can change those from JS. This leaves me with only the problem of how to trigger a "one-shot" animation from JS. – Cactus Oct 27 '21 at 10:29
  • Code formatting is for code. Referring to transitions or animations in prose is not code, so you should not use code formatting for that. – TylerH Apr 03 '23 at 15:49

1 Answers1

0

There is no such way in css really.

What you could do is assign classes with JS to trigger those animation. In order to do so you need to create a DOMAttrModified event listener.

Asplund
  • 2,254
  • 1
  • 8
  • 19
Aziz Sharipov
  • 1
  • 2