- transition 属性是一个简写属性,用于设置四个过渡属性:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- 语法:transition:要过渡的属性 .花费时间 运动曲线 何时开始;
要过渡的属性 | 想要变化的css属性,宽高和背景颜色内外边距都可以。如果想要所有的属性都变化过渡,写一个all就可以 |
---|
花费时间 | 单位是秒(必须写单位),比如0.5s |
运动曲线 | 默认是ease(可以省略) |
何时开始 | 单位是秒(必须写单位),可以设置延迟触发的时间,默认是0s(可以省略) |
运动曲线
值 | 描述 |
---|
linear | 动画从头到尾的速度是相同的,匀速 |
ease | 默认,动画以低速开始,然后加快,在结束前变慢j |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
steps() | 指定了时间函数中的间隔数量(步长) |
简单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<p>鼠标移到div</p>
</body>
<style>
div{
width: 50px;
height: 50px;
background-color: aqua;
transition: width 2s ease-out;
}
div:hover {
width: 200px;
}
</style>
</html>