我想要做的是在css3动画运行时更改元素的translate3d变换。然而,当我尝试这样做时,似乎动画每次在更新之前都会重置变换,导致平移始终为(0,0,0)。我希望能够让动画持续运行,并仍然能够使用javascript进行平移,例如:
element.style.webkitTransform='translate3d(100px, 30px, 0px)';
我知道可以通过使用第二个包含div来设置翻译,同时内部div运行动画,但如果可能的话,我想只使用一个div。你知道如何实现吗?
这是我的CSS:
.class{
width:32px;
height:32px;
position:absolute;
background: transparent url('./img/sprite.png');
background-size:100%;
-webkit-transform: translate3d(48px, 176px, 0px);
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 100ms;
-webkit-animation:spin .75s infinite linear;
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}