我希望 css3 动画,尤其是当我将其标记为“forwards”时,实际上会改变我元素的转换。但事实并非如此。
参见: http://jsfiddle.net/foreyez/3b3f6oyx/
---使用 Chrome 浏览器---
HTML:
<div style='position:fixed;bottom:10px'>
<button onclick='down()'>Go Down</button>
<button onclick='right()'>Go Right</button>
</div>
CSS:
@-webkit-keyframes animdownkf {
0% { }
100% { transform: translateY(100px); }
}
@-webkit-keyframes animrightkf {
0% { }
100% { transform: translateX(100px); }
}
#box {
width:50px;
height:50px;
background:black;
}
button {
height:100px;
width:100px;
}
.animdown {
-webkit-animation:1s animdownkf forwards;
}
.animright {
-webkit-animation:1s animrightkf forwards;
}
JavaScript:
function down() {
$('#box').removeClass('animright');
$('#box').addClass('animdown');
}
function right() {
$('#box').removeClass('animdown');
$('#box').addClass('animright');
}
我希望它做的是保持状态,所以如果我点击“向下”,它就会向下,然后如果我点击“向右走”,它就会从当前所在的位置向右走.
但它似乎并没有这样做。我知道 css3 transitions 允许这样做,但我特别想要 css3 动画,因为我需要使用关键帧。我只想 100% 改变实际元素的样式。有办法做到这一点吗?
最佳答案
为此你需要 jquery...
http://jsfiddle.net/swestphal/9kanuLc5/
<script type="text/javascript">
$(document).ready(function() {
$('#moveright').click(function() {
$('#box').animate({
'marginLeft' : "+=100px" //moves right
});
});
$('#movedown').click(function() {
$('#box').animate({
'marginTop' : "+=100px" //moves down
});
});
});
</script>
<button id="moveright">Move right</button> <button id="movedown">Move Down</button><div id="box" style="position:absolute;">x</div>
关于javascript - 如何在 CSS3 中保持动画之间的状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28249608/