Adds proper react css transition to encrypted images placeholders, so
that we can animate it's entrance and exit properly.
In addition, adds simple css animations file to properly handle all of
the animations in one place, so that it's much easier to properly handle
prefers-reduced-motion media query.
Text colour ended up being the link colour on images because the
whole image is in an `a`, but stickers are not so it got the default
font colour, which might be black. Define an explicit colour.
Also set pointer-events: none so you can hover over the gif icon
too (I managed to make the message panel small which made the icon
cover most the image, so this prevented the gif from animating
at all).
Fixes https://github.com/vector-im/riot-web/issues/8004
The benefits of this:
- One code path for determining spinner/placeholder and it's position
for loading images/stickers. This includes spinner used in e2e
decryption of images.
- Very small definition for MStickerBody, only overriding the minimal
differences is has from MImageBody.
The disadvantages:
- Slightly more complicated MImageBody, but hopefully not less
readable.
As the slightly nicer alternative to fixupHeight being applied once
we actually have a timelineWidth.
The niceness comes from not needing timelineWidth, which means we can
implement at render time with CSS. (Despite still calculating aspect
ratios when we render.)
