- From: François REMY <francois.remy.dev@outlook.com>
- Date: Mon, 10 Jun 2013 09:57:53 +0200
- 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