css中的transition讲解

最新推荐文章于 2025-03-22 01:30:05 发布

学前端的菜鸟

最新推荐文章于 2025-03-22 01:30:05 发布

阅读量1.7k

点赞数

分类专栏： css3 文章标签： css css3

本文链接：https://blog.youkuaiyun.com/qq_41938120/article/details/104999702

版权

css3 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了CSS3中的transition属性，包括transition-property、transition-duration、transition-timing-function和transition-delay四个子属性，用于实现元素的平滑过渡效果。通过示例展示了如何设置过渡效果，如鼠标悬停时元素的宽度和高度在1秒内逐步变化。

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

transition过渡

一共有四个属性
transition-property: 属性; 监听所有具备动画过渡的属性(默认为all)
transition-duration:时间; 时间间隔，过渡完成的时间
transition-timing-function:运动函数; 过渡的运动函数
transition-delay: 时间; 延迟时间开始过渡
也可以一起写。也可以多写几次

举例

div{
    width: 100px;
    height: 100px;
    background-color: red;
    transition : all 1s linear 1s;
}
div:hover{
    width: 200px;
    height: 200px;
    background-color: black;
}
<div></div>

初始状态
在这里插入图片描述
鼠标移上去，1s后开始过渡1s的时间完成过渡

div{
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 1s linear 1s, height 1s linear 2s;
}
div:hover{
    width: 200px;
    height: 200px;
    background-color: black;
}
<div></div>