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

How do you store content or metadata within a css keyframe?

本文关键字：元数据 存储 css 关键帧      更新时间：2023-09-26

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

@-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规则中存储元数据？

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

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

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

-webkit-animation: mymove 5s infinite;

让我知道这是否有效。

检查此网址http://msdn.microsoft.com/en-us/library/ie/jj680076(v=vs.85).aspx。这篇文章在互联网上效果很好 探索 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;
    }
}
相关文章：