Question

在Android webkit浏览器（4.x）中触发操作时，我遇到停止关键帧翻译的问题。

假设我们有这个CSS（使一个红色框进行无限旋转）：

#test
{
    width:150px;
    height:150px;
    background:red;
    position:absolute;
    -webkit-transform: translate3d(48px,95px,0px);
    top:0px;
    left:0px;
    -webkit-animation-name: mymove;
    -webkit-animation-play-state: running;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 5s; 
    -webkit-animation-iteration-count: infinite ;
    -webkit-animation-fill-mode: forwards; 
}

@-webkit-keyframes mymove 
{
    0%   { -webkit-transform: translate3d( 48px, 95px, 0px ) rotate( 0deg ) ;}
    100% { -webkit-transform: translate3d( 48px, 95px, 0px ) rotate( 360deg ) ;}
}

在HTML中，我使用id为“test”的div，并使用onTouchStart操作尝试使用JS停止旋转（没有运气）

this.style.webkitAnimationPlayState = 'paused'

如果更改此-webkit-transform: translate3d( 48px, 95px, 0px );，则会解决此问题有了这个-webkit-transform: translate( 48px, 95px ); 虽然，我需要3D变换。否则，由于我创建了许多对象，因此存在许多性能问题。

提前致谢

CSS3 3D关键帧变换无法暂停

0 个答案: