javascript - 如何在 css 关键帧中存储内容或元数据？

Question

有谁知道为什么我在关键帧动画中看不到 content 属性的效果？我试过类似的东西

@-webkit-keyframes mymove {
    0.000% {-webkit-transform: matrix(1,0,0,1,294,-135);
                     color:blue;
                     content:"test";
           }
    /*... more keyframes that changed the -webkit-transform property...*/
}

当我在看我的动画 HTML 时 div在动画期间，我可以看到 -webkit-transform 的效果和 color属性，但不是 content属性(property)。就好像 content在动画期间甚至没有应用属性。当我做 $(<my animated html element>).css("content"); 时，jQuery 也没有返回值然而反复测试$(<my animated html element>).css("-webkit-transform")返回不同的值作为 div在屏幕上移动。

我不一定要使用 content显示任何内容的属性。我希望能够在 CSS 中存储一些元数据 keyframe规则，以便我可以引用动画所在的相应百分比。我需要能够无限循环地运行动画，并定期查询动画 HTML 元素以确定它在动画中的运行距离。我以为我可以使用 content属性只是放置任意字符串，但它不适用于 Chrome 或 Firefox。有谁知道我如何在 keyframe 中存储元数据？ CSS 规则？

Answer 1

当您将元数据存储在关键帧中时，我不完全理解您要表达的意思。无论如何，jquery 或 javascript 无法读取 css3“内容”数据。另外我很确定你不能在关键帧内使用内容属性。您要么需要使用 :after 要么 :before。例如。

#box:before {
    content: "test";
}

如果你想让动画无限运行，你可以使用

-webkit-animation: mymove 5s infinite;

让我知道这是否有效。