Question

假设我有一个div，其中height指定为100px，我想对其进行动画处理，使其以固定 {{1} }高度。

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

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;
}

但是如果我需要在CSS外部设置<div id='foo1'>属性，以使其不是height的特定值，并且可以将其更改为任何其他值，那我该怎么办？为固定的100px中递增的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>

Answer 2

我认为没有直接的方法，但是您有几种解决方法：

使用padding（例如padding-bottom）来扩展元素的高度-仅在元素不应该让文本内容流入填充中时适用
使用border –与上面相同
使用额外的元素，例如::after
使用JavaScript –如果您已经在CSS的height“外部”进行了设置，可能是您在使用JS进行了设置？

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

2 个答案: