css-动画 注意-1.1

本文探讨了CSS中使用transition动画时,left属性与margin-left属性的区别。当希望元素位置变化带有动画效果时,直接修改left属性可能无法实现预期效果,而通过调整margin-left属性则可以触发动画。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  今天遇到一个神奇的问题,就是我设置动画是

transition: all 1s;

这时候我设置他动的属性是left,结果没有动画效果。我才注意到如果是left改变,那么就是相对位置改变是没有动画,如果想要动画,就要加margin-left,这样改变margin-left的值才会有动画。

.section9{ left: calc(50% - 640px); margin-left: -500px; transition: all 1s; }
.section9.active { margin-left: 0; }

这样才ok啦。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值