Search code examples
cssanimationinline-styles

Animation or transition just using style attribute inside a tag


It is possible?
I mean this:

<div style="?css animation?"> Content </div>

It can be any tag, or maybe triggering the animation or transition from other tag. This question is because I will like to use animations and transitions in a web app, but this app just let me use css included in the style tag attribute.

Pseudo clases I guess are out of the question so I can not trigger transitions, neither I can use javascript, so onmouseover or similar kind of stuff are out of the question.

Animations on the other hand needs their keyframes settings, and I can not set keyframes inside a style tag.. (or can I?). I read something similar here: https://css-tricks.com/animate-to-an-inline-style/ But I guess it would not work for what I am asking.

Not sure if there is a hack to import a css from an attribute or just achieve animations in chrome browsers (another thing, I have not access to the head section of the html).

Yeah I know, it seems mission impossible, I was just wonder in case there is some kind of trick to achieve this even if the animation is very limited. Thanks for your time.


Solution

  • No, afaik.

    Atleast not for those animations that require :hover or keyframes as you mentioned. However, it is possible by including animations attached to <style> contained within the same html page. Or by injecting css code using js code on the same html page . This suits if you are okay with CSS resting in the same file.

    The link you've mentioned is NOT using inline CSS for animation; it has a separate CSS file.