Re: [csswg-drafts] [css-transitions-2] Start transitions on discrete animation types (#4441)

Flackr,
I think your on to something. I am running into a problem with using the 'background-image' in an SVG transition [i.e. css: background-image: url (xyz)]

Once I have 'encode' in-line <svg> and apply it to the css as a background-image: url ...  I loose the transition ability.
This is because 'background-image' is "Animation type - DISCRETE".

If you have a work-around for this that would be great!

Here is where I'm stuck, I have an Accordion which uses the [+/-] svg as a toggle button.

I've got it working the way I want, but want to remove the HTML's in-line <svg>,
and place it into the CSS, Or at least have it as a <style> in the Header.
[see working: 1.0 default [current ver - no mod].html]

Placing it in the Header <style> works BUT I loose the animation.
[not working: 2.0 default [in header].html]

Ultimately I really want it in the CSS file, to get it completely out of the HTML.
[not working: 3.0 default [in css main2].html]

It could be that the 'encoding' will not allow the 'evenodd' method to work,
or I have it placed wrong, The animation/transitioning does not work.

The Button's CSS starts at line: 1495 

Example DL here: http://msgr.info/In-Line_SVG_to_CSS.zip - 152 KB (155,648 bytes)

[Note this 'example' is stripped down from the Original Site to lessen the load, it's a bit dirty-code - the best I could do to make an example]

Thank you for your help!

-- 
GitHub Notification of comment by TheBigApple
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4441#issuecomment-803472890 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 20 March 2021 22:31:57 UTC