Question

所以我和朋友在使用webkit方面遇到了一些麻烦。我们试图动画一个特定的div进行720°旋转并使用过渡来为容器本身设置动画，旋转由javascript函数触发。

这在Firefox和IE中运行得非常好，但是一旦我们切换到基于webkit的浏览器，旋转转换就不起作用了。

通过开发人员工具监控页面时，我们可以看到特定的属性被分配给div，只有转换没有被渲染。

javascript就是这样：

function projtheme() {  
var proj_title = document.getElementById("ring_1");
    proj_title.style.animation = "none";
    proj_title.style.WebkitAnimation = "none";
    proj_title.style.transform = "rotate(720deg)";
        proj_title.style.WebkitTransform = "rotate(720deg)";
        proj_title.style.opacity = "0.1";
}

function projtheme_exit() {

    var proj_title = document.getElementById("ring_1");
    proj_title.style.animation = "spin_cw 60s linear infinite";
    proj_title.style.WebkitAnimation = "spin_cw 60s linear infinite";
    proj_title.style.transform = "rotate(0deg)";
    proj_title.style.WebkitTransform = "rotate(0deg)";
    proj_title.style.opacity = "0.6";
}

并说javascript函数以这种方式调用：

<span id="projbtn" onmouseout="projtheme_exit();" onmouseover="projtheme();"></span>

动画div的CSS具有需要设置的属性（即过渡属性）：

#ring_1{
    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: -160px;
    margin-left: -150px;

    opacity: 0.6;

    display:block;

    animation: spin_cw 60s linear infinite;
    -webkit-animation: spin_cw 60s linear infinite;

    transition: all 0.5s ease;

}

非常感谢帮助，谢谢！

UPDATE：删除所述div上的动画功能似乎解决了问题，转换运行。问题是，动画需要保留。

更新2：在设置动画样式的行和在脚本中设置转换属性的行之间插入警报似乎可以使转换工作。

Webkit不呈现转换过渡

0 个答案: