- From: Valtteri Laitinen via GitHub <sysbot+gh@w3.org>
- Date: Fri, 14 Jan 2022 16:32:25 +0000
- To: public-css-archive@w3.org
Maybe one could just prefix the animation name with a double dash `--`.
This seems to work in browsers (latest Chrome, Firefox and Safari):
```html
<style>
@keyframes --move {
to {
transform: translateY(2em);
}
}
p {
animation: --move 1s alternate infinite;
}
</style>
<p>&%23x1f440;</p>
```
As a data URI:
```
data:text/html,<style>@keyframes --move{to{transform:translateY(2em)}}p{animation:--move 1s alternate infinite}</style><p>&%23x1f440;</p>
```
And if I read the spec correctly, `<custom-ident>` is allowed to start with a double hyphen, even though [MDN says otherwise](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name#values). (On the other hand, the [CSS Validator](https://jigsaw.w3.org/css-validator/) returns parse errors, but is that a bug?)
--
GitHub Notification of comment by valtlai
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6946#issuecomment-1013275447 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 14 January 2022 16:32:27 UTC