javascript - 将 JQuery 动画转换为 Javascript/CSS3

Question

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

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

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

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

但我不确定如何增加大小。

有什么想法吗？

谢谢!

Answer 1

keyframes怎么样？ ？

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

---

一个选项是 scale :

transform:  scale(sx[, sy]);

做 2 倍:

transform:  scale(2);

或 2 倍宽，3 倍高:

transform:  scale(2,3);