Question

有谁知道为什么我在关键帧动画中看不到内容属性的效果？我试过像

这样的东西

@-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没有返回值。但是，当$(<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";
}

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

-webkit-animation: mymove 5s infinite;

让我知道这是否有效。

Answer 2

检查此网址http://msdn.microsoft.com/en-us/library/ie/jj680076(v=vs.85).aspx。本文适用于Internet Explore 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;
    }
}

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

2 个答案: