如何在 CSS 关键帧中存储内容或元数据？答案

【问题标题】：How do you store content or metadata within a css keyframe?如何在 CSS 关键帧中存储内容或元数据？
【发布时间】：2013-09-07 05:32:51
【问题描述】：

有谁知道为什么我在关键帧动画中看不到 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 属性的效果。就好像在动画期间甚至没有应用 content 属性。当我执行$(<my animated html element>).css("content"); 时，jQuery 也没有返回值但是，当div 在屏幕上移动时，反复测试$(<my animated html element>).css("-webkit-transform") 返回了不同的值。

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

【问题讨论】：

我认为你不能这样使用content。如果我没记错的话，它最初是为:after 和:before 元素设计的。 MDN Link
我同意，但我觉得奇怪的是我可以进入 Chrome 开发者工具，选择一个 html 元素并手动设置它的 css 内容属性。然后，我可以使用 jQuery 的 .css("content") 来检索我刚刚设置的字符串。

标签： javascript jquery css animation css-animations

【解决方案1】：

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

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

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

-webkit-animation: mymove 5s infinite;

让我知道这是否有效。

【讨论】：

我的主要问题是我不知道如何获取正在播放的关键帧；我需要找到动画当前的百分比。所以，我想我可以设置一个css属性，比如内容，等于当前关键帧的百分比。然后我可以使用 jQuery 的 .css("content") 方法来获取当前关键帧的百分比。现在，我可以在关键帧规则中设置 z-index，当我定期查询 .css('z-index') 时，我会得到动画当前所处的百分比。但我可能还想为 z-index 设置动画，所以我需要设置其他东西。我认为内容会起作用。
我很确定你不能轻易地将动画百分比从 css 传递到 javascipt。您需要运行一个计时器来定期检查元素的位置或变换，这并不容易。我建议查看这篇关于 CSS 动画的非常好的文章。 msdn.microsoft.com/en-us/library/ie/jj680076(v=vs.85).aspx

【解决方案2】：

检查此网址http://msdn.microsoft.com/en-us/library/ie/jj680076(v=vs.85).aspx。这篇文章在 Internet Explorer 9+ 上运行良好对于 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;
    }
}

【讨论】：