Allow linkStyle to be animated

[cmnstmntmn]

Proposal

I'm using Github gists for documentation, and i would like to have a way to allow animation between the notes.

I was trying to add custom css, but keyframes are not supported.

Possible solutions:

Add new char for lines to mark that that link is animated

Current implementation - no animation

Length	1	2	3
Normal	---	----	-----
Normal with arrow	-->	--->	---->
Thick	===	====	=====
Thick with arrow	==>	===>	====>
Dotted	-.-	-..-	-...-
Dotted with arrow	-.->	-..->	-...->

How to mark a line for having an animated behaviour

Length	1	2	3
Normal	---^	----^	-----^
Normal with arrow	-->^	--->^	---->^
Thick	===^	====^	=====^
Thick with arrow	==>^	===>^	====>^
Dotted	-.-^	-..-^	-...-^
Dotted with arrow	-.->^	-..->^	-...->^

Proposed implementation - with animation (preferred)

^ pin operator will mark that:

• a dotted line will have a moving infinite animation

• a normal line will have a fade in/ fade out infinite animation

Add a new keyframesDef property

I think adding support for keyframes like keyframesDef, the same way like classDef

graph RL
    A:::className -.-> B
    classDef className fill:green;
    keyframesDef animationName 0% stroke-dashoffset: 0, 100% stroke-dashoffset: 0 color: red
    linkStyle 0 animation: animationName 1s linear infinite;

Example

https://d2lang.com/tour/style#animated

Screenshots

No response

[cmnstmntmn]

I've made some progress on this.

[ingo-eichhorst]

Alternatively you can always apply any styling to the SVG in a HTML context. Here is an example which gives you 100% freedom.
https://gist.github.com/ingo-eichhorst/cd18efd5cbc3dc60cb6095c0affe3e65

[knsv]

Proposing a new syntax for this. The key thing is to be able to attach an id the edge. After trhat we use the same syntax for edges as we have to add additional info to a node.

Easiest case:

flowchart LR
        A e1@==> B
        e1@{ animate: true}

Selecting type of animation

V1 will support 2, fast and slow

flowchart LR
  A e1@--> B
  e1@{ animation: fast}

This is a shorthand for { animate: true, animation: fast}

classDef statements

You can also add animations using classDef statements

flowchart LR
  A e1@--> B
  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
  class e1 animate

Note the escaped comma in the dasharray. This is because ',' is used as a delimiter between styles mermaid.