css-动画注意-1.1

彩舒

于 2018-10-09 10:11:04 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签：动画 css

本文链接：https://blog.youkuaiyun.com/caishu1995/article/details/82978195

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