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

有人知道为什么我在关键帧动画中看不到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转换

和

颜色

属性的效果，但看不到

内容

属性。这就好像在动画中甚至没有应用

内容
属性一样。当我执行
$（）.css（“content”）时，jQuery也没有返回值div在屏幕上移动时，重复测试
$（）.css（“-webkit transform”）
返回不同的值

我不一定要使用
content
属性来显示任何内容。我希望能够在CSS
keyframe
规则中存储一些元数据，以便我可以返回到动画所处的相应百分比。我需要能够在无限循环上运行动画，并定期查询动画HTML元素，以确定动画中的动画长度。我想我可以使用
content
属性来放置任意字符串，但它在Chrome或Firefox上不起作用。有人知道我如何在
关键帧
CSS规则中存储元数据吗？
我不完全理解您在关键帧中存储元数据时想说什么。。总之，jquery或javascript无法读取css3“内容”数据。此外，我非常确定不能在关键帧内使用内容属性。您需要使用：after或：before。例如

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

如果要在Inte中运行动画，可以使用

-webkit-animation: mymove 5s infinite;

让我知道这是否有效。
检查此url
http://msdn.microsoft.com/en-us/library/ie/jj680076（v=vs.85）.aspx
。
这篇文章在InternetExplore9上很有用+
对于除IE 9+以外的其他浏览器，您需要使用供应商特定的关键帧复制和粘贴css3动画关键帧

例如，对于chrome，您必须在文章中编写css：

@keyframes fadeOut {
    from {  
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.TransformDemoDivFadeOut:hover {
    animation-duration: 2s;
    animation-name: fadeOut;
    @-webkit-animation-duration: 2s;
    @-webkit-animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
    from {  
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

我认为你不能这样使用
内容。如果我没有错的话，它最初是为
：after
和
：before
元素设计的。我同意，但我觉得很奇怪，我可以进入Chrome开发者工具，选择一个html元素并手动设置它的css内容属性。然后，我可以使用jQuery的.css（“content”）检索我刚刚设置的字符串；我需要找到动画当前的百分比。所以，我想我可以设置一个css属性，比如内容，等于当前关键帧的百分比。然后我可以使用jQuery的.css（“content”）方法来获取当前关键帧的百分比。现在，我可以在关键帧规则中设置z-index，当我定期查询.css（'z-index'）时，我会得到动画当前的百分比。但我可能还想设置z索引的动画，所以我需要设置其他内容。我认为内容会起作用。我很确定你不能轻易地将动画百分比从css传递到javascipt。您需要运行一个计时器来定期检查元素的位置或转换，这并不容易。我推荐您查看这篇关于css动画的非常好的文章。