Html CSS+；/-用于宽度和高度动画的x像素

是否有任何方法可以设置div的动画（最好不使用javascript），使其宽度/高度增加或减少5px？我不是说使用

scale（0.95）

或

zoom:95%

，因为这取决于div的原始大小，我希望在不使用jQuery的情况下始终精确更改5px。

• 要求

  div

  的

  高度增量是已知的，而不是假定的

小提琴：

使用jQuery

• 允许将

  高度

  更改为现有值的增量或减量，而不考虑该值是什么

小提琴：

没有jQuery

• 要求

  div

  的

  高度增量是已知的，而不是假定的

小提琴：

使用jQuery

• 允许将

  高度

  更改为现有值的增量或减量，而不考虑该值是什么

小提琴：

---

无需调整分区大小

这里有一个变体，其中主div不转换，但父div转换。这可能更有用，具体取决于您的场景

div.outer{
过渡：填充。5s；
填充：10px；
位置：相对位置；
}
外部分区：悬停{
填充：15px；
}
内分区{
顶部：10px；
右：10px；
底部：10px；
左：10px；
位置：绝对位置；
}

无需调整分区大小

这里有一个变体，其中主div不转换，但父div转换。这可能更有用，具体取决于您的场景

div.outer{
过渡：填充。5s；
填充：10px；
位置：相对位置；
}
外部分区：悬停{
填充：15px；
}
内分区{
顶部：10px；
右：10px；
底部：10px；
左：10px；
位置：绝对位置；
}

您的无JS解决方案需要预定义的大小，不是吗？我不确定“高度增量”是什么意思。@isherwood CSS解决方案确实如此，但是jQuery解决方案并不关心预定义的大小：

'-=Npx'

和

'+=Npx'

我使用了

高度，因为OP想更改它。将填充添加到
div
会添加垂直不动产，但不会更改高度值。您的无JS解决方案需要预定义的大小，不是吗？我不确定“高度增量”是什么意思。@isherwood CSS解决方案确实如此，但是jQuery解决方案并不关心预定义的大小：
'-=Npx'
和
'+=Npx'
我使用了
高度，因为OP想更改它。将填充添加到
div
会添加垂直不动产，但不会更改高度值。谢谢第一个成功了，不过如果我挑剔的话，我会指出，像5px这样的小填充动画根本不会产生平滑的动画…对我来说非常平滑。也许试着缩短持续时间。我发现狩猎并不十分顺利。Firefox和IE10是透明的。谢谢！第一个成功了，不过如果我挑剔的话，我会指出，像5px这样的小填充动画根本不会产生平滑的动画…对我来说非常平滑。也许试着缩短持续时间。我发现狩猎并不十分顺利。Firefox和IE10是透明的。
div.growable {
    background: red;
   color: white;
   -webkit-transition: height 200ms ease-in-out;
   height: 100px;
}
div.growable:hover {
   height: 105px;
}

$(function(){
    $('#growDiv').click(function(){
        $('div.growable-js').animate({'height' :'+=5px'}, 200);
    });
   $('#shrinkDiv').click(function(){
       $('div.growable-js').animate({'height': '-=5px'}, 200);
    });
});

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

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>