Setting a keyframe value as an offset? - html

Question

Let's say I have a div with a specified height of 100px and I want to animate it so it grows by a fixed 20px height.
The snippet below shows how I implemented it, successfully.
#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'>
But what if I need to set the height property outside the CSS, so that it's not a specific value of 100px and it can be changed to any other value, but still, I want to animate an increasing height of a fixed 20px ?
Is there a way to set the animaton value as an offset of the original element value?

Answer 1

Increase the padding if you will not have any content and it's a simple visual animation:
#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'>
Or use CSS variables:
#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>

Answer 2

I don't think there is a direct way, but you have several workarounds:
use padding (e.g. padding-bottom) to extend the element's height – only applicable if the element is not supposed to have text content flowing into the padding
use border – same as above
use an extra element, e.g. ::after
use JavaScript – if you are already setting the height "outside" of CSS, it may be that you are setting it with JS?