Question

我已经尝试了很长一段时间找到解决方案，但我无法让它在Chrome中运行。有人可以展示如何使用-webkit命令吗？这是在IE中运行的css代码：

    @keyframes swingdown {
    0% {
        opacity: .99999;
        transform: rotateX(90deg);

    }

    30% {           
        transform: rotateX(-20deg) rotateY(5deg);
        animation-timing-function: ease-in-out;
    }

    65% {
        transform: rotateX(20deg) rotateY(-3deg);
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: rotateX(0);
        animation-timing-function: ease-in-out;
    }
}

html是一个简单的菜单：

<body>
 <div id="container">
<ul id="menu">
  <li><a href="#">About Me</a>
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
<li><a href="#">Portfolio</a>
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
<li><a href="#">Clients</a>
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
<li><a href="#">Contact Me</a>
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</li>
<li><a href="#">Support</a></li>
 </ul>
 </div>
 </body>

Answer 1

使用此

@-webkit-keyframes swingdown {
0% {
    opacity: .99999;
    -webkit-transform: rotateX(90deg);

}

30% {           
    -webkit-transform: rotateX(-20deg) rotateY(5deg);
    -webkit-animation-timing-function: ease-in-out;
}

65% {
    -webkit-transform: rotateX(20deg) rotateY(-3deg);
    -webkit-animation-timing-function: ease-in-out;
}

100% {
    -webkit-transform: rotateX(0);
    -webkit-animation-timing-function: ease-in-out;
}
}

基本上在所有动画部分之前使用-webkit-

关键帧不适用于Chrome，webkit？

1 个答案: