gpt4 book ai didi

css - Webkit CSS 动画问题 - 坚持动画的结束状态?

转载 作者:数据小太阳 更新时间:2023-10-29 09:08:16 24 4
gpt4 key购买 nike

<分区>

给定以下 CSS3 动画....

<style type="text/css" media="screen">

.drop_box {
-webkit-animation-name: drop;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

from {
-webkit-transform: translateY(0px);
}

to {
-webkit-transform: translateY(100px);
}

}
</style>

<div class="drop_box">
Hello world
</div>

Hello World 文本按预期向下移动 100 像素进行动画处理。但是,在动画结束时它会跳回到原来的位置。

显然这在 CSSland 中是有意义的。动画已应用且不再作用于元素,因此原始样式生效。不过,这对我来说似乎有点奇怪 - 当然,如果一个人正在为一个元素设置动画,那么人们会期望该放置会持续存在吗?

是否有任何方法可以使结束位置“粘滞”,而不必借助 Javascript 在动画结束时将类名或样式标记到元素上以修复其已更改的属性?我知道 transitions persist ,但对于我有疑问的动画(该示例仅用于演示目的),过渡不提供所需的控制级别。如果没有这个,复杂的动画似乎只适用于元素最终回到其原始状态的循环过程。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com