Current support for keyframes

[kuon]

As I understand, elm-css do not provide native support for keyframes.

But is it possible to generate keyframes css with something like property?

[rtfeldman]

@kuon Yep! http://package.elm-lang.org/packages/rtfeldman/elm-css/11.0.0/Css#selector should do the trick.

(Sorry I took so long responding to this. 😅)

[rtfeldman]

@kuon Yep! http://package.elm-lang.org/packages/rtfeldman/elm-css/11.0.0/Css#selector should do the trick.

(Sorry I took so long responding to this. 😅)

[jeffutter]

I'm wondering if there are any examples to do this. So far I have:

        , selector "@keyframes sk-bouncedelay"
            [ descendants
                [ selector "0%, 80%, 100%"
                    [ property "transform" "scale(0)" ]
                , selector "40%"
                    [ property "transform" "scale(1.0)" ]
                ]
            ]

However, that yields:

@keyframes sk-bouncedelay  0%, 80%, 100% {
    transform: scale(0);
}

@keyframes sk-bouncedelay  40% {
    transform: scale(1.0);
}

I am hoping to get:

  @keyframes sk-bouncedelay {
    0%, 80%, 100% { 
      transform: scale(0);
    } 40% { 
      transform: scale(1.0);
    }
  }

Any suggestions?

[jeffutter]

I'm wondering if there are any examples to do this. So far I have:

        , selector "@keyframes sk-bouncedelay"
            [ descendants
                [ selector "0%, 80%, 100%"
                    [ property "transform" "scale(0)" ]
                , selector "40%"
                    [ property "transform" "scale(1.0)" ]
                ]
            ]

However, that yields:

@keyframes sk-bouncedelay  0%, 80%, 100% {
    transform: scale(0);
}

@keyframes sk-bouncedelay  40% {
    transform: scale(1.0);
}

I am hoping to get:

  @keyframes sk-bouncedelay {
    0%, 80%, 100% { 
      transform: scale(0);
    } 40% { 
      transform: scale(1.0);
    }
  }

Any suggestions?

[Wrent]

@jeffutter have you managed to solve this?

[Wrent]

@jeffutter have you managed to solve this?

[jeffutter]

@Wrent nope sorry. I haven't done much with elm lately.

[jeffutter]

@Wrent nope sorry. I haven't done much with elm lately.

[ryan-senn]

I managed to hack spinning animations like this if someone else is desperate enough in the meantime:

selector "@keyframes spin"
    [ property "0% { transform" "rotate(0deg); } 100% { transform: rotate(360deg); }" ]

Essentially with property, using the string up to the first : (colon) as the key and the rest as the value.

Comes out like this:

@keyframes spin {
    0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); };
}

[ryan-senn]

I managed to hack spinning animations like this if someone else is desperate enough in the meantime:

selector "@keyframes spin"
    [ property "0% { transform" "rotate(0deg); } 100% { transform: rotate(360deg); }" ]

Essentially with property, using the string up to the first : (colon) as the key and the rest as the value.

Comes out like this:

@keyframes spin {
    0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); };
}