2

有谁知道为什么我在关键帧动画中看不到 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...*/
}

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

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

4

2 回答 2

0

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

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

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

-webkit-animation: mymove 5s infinite;

让我知道这个是否奏效。

于 2013-09-07T05:44:43.130 回答
0

检查这个网址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;
    }
}
于 2013-09-07T06:15:57.213 回答