W3C home > Mailing lists > Public > www-style@w3.org > June 2013

Re: [css-variables] are variables animatable?

From: François REMY <francois.remy.dev@outlook.com>
Date: Mon, 10 Jun 2013 09:57:53 +0200
Message-ID: <DUB120-DS5FA4F50324BC8140C6F10A5840@phx.gbl>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: "www-style list" <www-style@w3.org>
> > Hum, can we specify they flip immediately by default? Because this is 
> > the behavior you want in order to keep variables no-op.
> >
> > Again:
> > @keyframes { from { top: 0px; } to { top: 100px; } }
> > @keyframes { from { top: get(var-top); var-top: 0px; } to { var-top: 
> > 100px; } }
>
> I've logged an issue about this.
>
> ~TJ

Maybe you should file another issue, because I found a way to use CSS 
Animations to create a variable loop (for now, it don't work because Chrome 
ignores variable declarations in keyframes but per the precedent section I 
infer we would like to make it work).

<html>
    <head>
        <title>Test</title>
        <style>

            @-webkit-keyframes anim1 {
                0% {
                    -webkit-var-anim: anim2;
                    -webkit-var-bg: #eeeff;
                    color: blue;
                }
                100% {
                    -webkit-var-anim: anim2;
                    -webkit-var-bg: #eeeff;
                    color: blue;
                }
            }

            @-webkit-keyframes anim2 {
                0% {
                    -webkit-var-anim: anim1;
                    -webkit-var-bg: #ffeeee;
                    color: orange;
                }
                100% {
                    -webkit-var-anim: anim1;
                    -webkit-var-bg: #ffeeee;
                    color: orange;
                }
            }

            html {
                -webkit-var-bg: white;
                -webkit-var-anim: anim1;
                -webkit-animation-name: -webkit-var(anim);
                -webkit-animation-duration: 1s;
                -webkit-animation-fill-mode: both;
                background: -webkit-var(bg);
                color: black;
            }

        </style>
    </head>
    <body>
        Some text
    </body>
</html>


As I said, Chrome ignores variable delcarations in the keyframes so the 
result is blue text one pure white bg (at this time). 
Received on Monday, 10 June 2013 07:58:21 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:12 UTC