css3过渡动画——transition属性
- 语法
```css
transition: transition-proterty transition-duration transition-timing-function transition-delay;
transition: css样式 动画的执行时间 速度类型 动画的延迟时间;
多个css属性用逗号隔开
transition: transform 2s, background-color 2s;
注意：谁发生了属性的改变 就加在谁身上
```
- 属性
1、transition-proterty
- css样式：参与过渡的css属性名称|all表示所有属性
2、transition-duration
- 动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms
3、transition-timing-function
- 速度类型
1.linear 相同的速度从开始到结束，也就是匀速
2.ease 默认值 慢速度开始--速度变快--慢速度结束
3.ease-in 慢速度开始的过渡效果，也就是以低速度开始
4.ease-out 慢速度结束的过渡效果，也就是以低速结束
5.ease-in-out 以慢速度开始和结束的过渡效果
4、transition-delay
- 延迟时间：默认0s,单位s|ms
> 注意：必须设置transition-duration属性，否则执行时间为0，不会产生过渡效果
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.warp {
width: 400px;
height: 400px;
background-color: pink;
}
.box {
width: 200px;
height: 200px;
background-color: tomato;
/* 参与过渡的css属性名称 */
transition-property: width, height, background-color;
/* 动画执行时间 */
transition-duration: 2s;
/* 速度类型 */
transition-timing-function: linear;
/* 延迟时间 */
transition-delay: 2s;
/* 复合写法 */
transition: width 2s 2s, height 2s 2s, background-color 2s 2s;
/* transition: all 1s linear 2s; */
transition: 2s linear 2s;
}
.warp:hover .box {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="warp">
<div class="box"></div>
</div>
</body>
</html>
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
