当前位置：首页 > news >正文

前端css 动画过渡类型以及不同写法

news 2025/11/29 2:56:30

动画过渡简写和复合写法

拆开写

transition-property: height background; 单独设置宽高或者all

transition-duration: 2s; 运动时间

transition-timing-function: linear; 不同速度类型

transition-delay: 5s; 延迟时间

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background: yellow;transition-property: height background;/* 单独设置宽高或者all、 */transition-duration: 2s;/* 运动时间 */transition-timing-function: linear;/* 不同速度类型 */transition-delay: 5s;/* 延迟时间 */}div:hover{height: 600px;background: red;}</style>
</head>
<body><div></div>
</body>
</html>

复合写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background: red;transition:all 2s linear 2s;/* all:所有属性2s   动画时间linear  默认匀速2s  延迟2s*/}div:hover{width: 400px;height: 600px;background: yellow;}</style>
</head>
<body><div></div>
</body>
</html>

6种不同类型的过渡

cubic-bezier.comhttps://cubic-bezier.com/#.17,.67,.83,.67

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul{list-style: none;}li{width: 200px;height: 50px;border: 1px solid gray;}ul:hover li:nth-child(1){width: 600px;transition: all 2s linear;}ul:hover li:nth-child(2){width: 600px;transition: all 2s ease;}ul:hover li:nth-child(3){width: 600px;transition: all 2s ease-in;}ul:hover li:nth-child(4){width: 600px;transition: all 2s ease-in-out;}ul:hover li:nth-child(5){width: 600px;transition: all 2s ease-in-out;}ul:hover li:nth-child(6){width: 600px;transition: all 2s cubic-bezier(.17,.67,1,-0.06);}</style>
</head>
<body><ul><li>匀速</li><li>逐渐慢</li><li>加速</li><li>减速</li><li>先加速后减速</li><li>贝塞尔曲线</li></ul>
</body>
</html>