css-动画注意-1.1

原创于 2018-10-09 10:11:04 发布 · 149 阅读

CC 4.0 BY-SA版权

文章标签：

105 篇文章

订阅专栏

本文探讨了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啦。

css-动画 注意-1.1