css3过渡属性属性名:transition

CSS3的过渡属性属性名是transition,它允许我们在状态改变时为元素添加过渡效果,例如在元素从一种样式变为另一种样式时添加平滑的过渡效果。

transition的语法如下:

复制代码
transition: property duration timing-function delay;

其中,

  • property:需要过渡的CSS属性,如transition: opacity;
  • duration:过渡的持续时间,以秒或毫秒为单位,如transition: 1s;
  • timing-function:过渡效果的时间函数,如linear、ease-in、ease-out等,也可以使用贝塞尔曲线来自定义,例如transition: cubic-bezier(0.1, 0.7, 1.0, 0.1);
  • delay:过渡开始前的延迟时间,以秒或毫秒为单位,如transition: 1s 0.5s;

以下是一个简单的代码演示:

html 复制代码
<style>
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: width 1s linear;
    }
    div:hover {
        width: 200px;
    }
</style>
<div></div>

在这个例子中,我们使用transition将div元素的width属性过渡到变为200像素,过渡持续1秒,时间函数为linear。当鼠标滑过div元素时,它的宽度将过渡到200像素,并且会有一个平滑的效果。

相关推荐
海底火旺2 分钟前
useState:批处理与函数式更新
前端·react.js·面试
亿万托福4 分钟前
数字世界的构筑之艺:前端技术栈的浅描与远瞻
前端
用户40812812003814 分钟前
JWT 和 token 区别
前端
盏茶作酒295 分钟前
打造自己的组件库(三)打包及发布
前端·vue.js
单休好_好就好在比双休少一天6 分钟前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript
yinke小琪6 分钟前
JavaScript DOM内容操作常用方法和XSS注入攻击
前端·javascript
归于尽6 分钟前
从 TodoList 看自定义 Hook 的设计思想
前端
G等你下课6 分钟前
如何优雅地组织业务逻辑?自定义 Hook 全解析
前端·react.js
刘坤157 分钟前
封装axios二方包
前端·http
饮茶三千8 分钟前
几个在开发中起大作用的CSS新特性!
前端·css