代码之家 › 专栏 › 技术社区 › Koby Douek Cicero Silva Luiz Junior

将关键帧值设置为偏移?

css-animations css html

Koby Douek Cicero Silva Luiz Junior · 技术社区 · 6 年前

假设我有一个 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'>

但是如果我需要设置 高度 属性,以便它不是 100px 它可以更改为任何其他值,但我仍然希望 高度 固定的 20PX ?

有没有方法将animaton值设置为抵消原始元素值?

2 回复 | 直到 6 年前

Temani Afif 6 年前

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

@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>

Aurel Bílý 6 年前

我不认为有直接的方法,但你有几个解决办法:

使用 padding (例如) padding-bottom )扩展元素的高度“仅当元素不应该有文本内容流入填充时才适用”
使用 border _“同上
使用额外的元素,例如 ::after
如果已经设置了 height CSS的“外部”可能是您使用JS设置的?

推荐文章

lineage · docker中五彩纸屑的代码是什么/欢迎来到docker?[关闭]

9 月前

mini1012 · 关键帧css中百分比之间的延迟

9 月前

Fernandossmm · element.animate()使用关键帧似乎忽略了放松功能

1 年前

goalTosin · 当一个项目被删除时,我如何设置侧边栏项目向上滑动的动画?

1 年前

Dan · 如何设置重置变换的动画:使用CSS关键帧旋转?

1 年前

Dan · 如何使用Tailwind创建动画序列?

1 年前

Thomas Pötz · CSS伪元素的翻译速度快于主元素

2 年前

Morteza M · 在连续旋转中更改CSS动画持续时间

2 年前

Chris Dk · 为什么我的html元素在动画后会消失

2 年前

dododdo · 看到对象后在css中的动画

2 年前