html - 将关键帧值设置为偏移量？

Question

假设我有一个 div，其指定的 height 为 100px，我想为其设置动画，使其增长 固定 20px 高度。

下面的代码片段展示了我是如何成功实现它的。

@keyframes foo {
    0% {
       height: 100px;
    }
    50% {
       height: 120px;
    }
    100% {
       height: 100px;
    }
}

#foo1 {
    background-color:blue;
    
    width:100px;
    height:100px;

    animation-name: foo;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

<div id='foo1'>

但如果我需要在 CSS 之外设置 height 属性，使其不是 100px 的特定值，并且可以更改为任何其他值，但是，我仍然想为固定 20px 的增加的 height 设置动画？

有没有办法将动画值设置为原始元素值的偏移？

Answer 1

如果您没有任何内容并且这是一个简单的视觉动画，请增加填充:

@keyframes foo {
    0%,100% {
       padding-bottom: 0px;
    }
    50% {
       padding-bottom: 20px;
    }
}

#foo1 {
    background-color:blue;
    
    width:100px;
    height:100px;

    animation-name: foo;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

<div id='foo1'>

或者使用 CSS 变量:

@keyframes foo {
    0%,100% {
       height:var(--h,100px)
    }
    50% {
       height:calc(var(--h,100px) + 20px);
    }
}

#foo1 {
    background-color:blue;
    
    width:100px;
    height:var(--h,100px);
    display:inline-block;
    animation-name: foo;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

<div id='foo1'></div>
<div id='foo1' style="--h:50px;"></div>