transition和transition的区别

最新推荐文章于 2025-06-20 17:54:17 发布

余音未凉

最新推荐文章于 2025-06-20 17:54:17 发布

阅读量3.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_27976163/article/details/99656352

2 篇文章

订阅专栏

本文深入探讨CSS中transition与animation的区别，包括触发条件、循环控制及动画灵活性的对比。解析transition的复合属性，如transition-property、transition-duration等，并通过实例说明不同属性设置下元素过渡效果的变化。

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

定义**
过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果

transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)

1、下面面transition:width 2s定义在类名属性中，触发鼠标悬浮时，会触发元素的过渡动画效果，鼠标离开时，也会触发元素的过渡效果

.box{
	width:100px;
	height:100px;
	background:blue;
	transition:width 2s;
}
.box:hover{
    width:300px;
}
<div class='box'></div>

2.如果transition: width 2s 属性写在hover样式中，鼠标悬浮的过渡动画还是会有，但是鼠标离开时的动画没有了，鼠标离开没有过渡效果，直接回到初始状态

.box{
	width:100px;
	height:100px;
	background:blue;
}
.box:hover{
    width:300px;
    transition:width 2s;
}
<div class='box'></div>