Closed hrvstr closed 3 years ago
This is a great question, thanks @hrvstr.
According to https://drafts.csswg.org/css-transforms/#transformable-element
A transformable element is an element in one of these categories:
all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],
all SVG paint server elements, the clipPath element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2].
So looks like you were spot on: non-replaced inline elements aren't "transformable elements."
(However some are, such as img
which is a replaced element. Here's a list of replaced elements.)
Thanks for the in depth answer and links. Looks like I have to change the templates of the theme I am using quite a bit.
I tried searching the GitHub issues but couldn't find anything relevant. Sorry if I missed something.
I am trying to animate a
span
but for some reason it will not apply thedistance
andorigin
parameter. Is it because aspan
is an inline element? When I change it to adiv
everything works as expected.span demo div demo
Environment