将JQuery动画转换为Javascript / CSS3

Question

我正在尝试向左移动div并将高度和宽度增加100px。 我可以使用JQuery做到这一点，但我想知道如何使用JavaScript / CSS3做到这一点？

$("#button").click(function(){
    $("#div").animate({
        left: '250px',
        height: '+=100px',
        width: '+=100px',
    });
});

我正在使用翻译功能来移动它

-webkit-transform: translate(100px,0);

但是我不确定如何增加尺寸。

有任何想法吗？

谢谢！

Answer 1

关键帧呢？

@keyframes identifier {
  0% { width: 25%; height: 40%; }
  30% { width: 30%; height: 30%; }
  68%, 72% { width: 75%; }
  100% { width: 80%; height: 50%; }
}

---

一种选择是规模 ：

transform:  scale(sx[, sy]);

使2倍：

transform:  scale(2);

或2倍宽，3倍高：

transform:  scale(2,3);