宽度和高度动画的CSS +/- x像素

Question

有没有办法动画div（最好没有javascript），以便它在宽度/高度上增加或减少5px？我并不是指使用scale(0.95)或zoom: 95%，因为这取决于div的原始大小，我希望始终更改5px。

Answer 1

没有jQuery

• 要求height的{​​{1}}增量是已知的，而不是假定的。

div

  

小提琴：http://jsfiddle.net/Xh4vC/

使用jQuery

• 允许div.growable { background: red; color: white; -webkit-transition: height 200ms ease-in-out; height: 100px; } div.growable:hover { height: 105px; } 中的更改为现有值的增量或减量，而不关心该值是什么。

height

  

小提琴：http://jsfiddle.net/Xh4vC/

Answer 2

不需要分配大小......

http://jsfiddle.net/5rDar/4

div {
    width: 200px;
    height: 200px;
    background-color: #eee;
    transition: padding .5s;
    padding: 10px;
}
div:hover {
    padding: 15px;
}

这是一个变化，其中主要div不转换，但父进行转换。根据您的情况，这可能更有用。

http://jsfiddle.net/5rDar/3

div.outer {
    transition: padding .5s;
    padding: 10px;
    position: relative;
}
div.outer:hover {
    padding: 15px;
}
div.inner {
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    position: absolute;
}

<div class="outer">
    <div class="inner">
    </div>
</div>