我用 CSS transform-translateX 编写了一个测试。动画有效,但对象不保持最终位置,返回到原始位置。
如何保持最终位置?
这里是 CSS:
@-webkit-keyframes mover {
0% { -webkit-transform: translateX(0); }
100% { -webkit-transform: translateX(300px); }
}
@-moz-keyframes mover {
0% { -moz-transform: translateX(0); }
100% { -moz-transform: translateX(300px); }
}
@-o-keyframes mover {
0% { -o-transform: translateX(0); }
100% { -o-transform: translateX(300px); }
}
@keyframes mover {
0% { transform: translateX(0); }
100% { transform: translateX(300px); }
}
#box {
position: relative;
top: 20px;
left: 20px;
width: 50px;
height: 50px;
background-color: #666;
}
.box-mover {
-webkit-animation: mover 2s ease-in-out;
-moz-animation: mover 2s ease-in-out;
-o-animation: mover 2s ease-in-out;
animation: mover 2s ease-in-out;
}
这里是测试: http://jsfiddle.net/junihh/1v0t9vs2/
感谢您对此的任何帮助。
最佳答案
添加 forwards
关键字。 DEMO
.box-mover {
-webkit-animation: mover 2s ease-in-out forwards;
-moz-animation: mover 2s ease-in-out forwards;
-o-animation: mover 2s ease-in-out forwards;
animation: mover 2s ease-in-out forwards;
}
这将设置 animation-fill-mode:
属性。
Forwards - The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and animation-iteration-count:
关于css - TranslateX 一个对象并保持最终位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27392025/