- HTML中文网
- 联系QQ：18840023
- QQ交流群
- 微信公众号
前端控
更新时间：2019-03-23 11:15:53
CSS3 过渡
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，在元素从一种样式变换为另一种样式时为元素添加效果
浏览器支持：
| 属性 | 浏览器支持 | ||||
| transition | |  |  | 需要前缀 -webkit- |  |
CSS3过渡的用法：
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间
div
{
width:100px;
height:100px;
background:#48ef96;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:450px;
}点击 "运行实例" 按钮查看在线实例
效果图：
多样式改变
要添加多个样式的变换效果，需要添加的属性要由逗号分隔
div
{
width:100px;
height:100px;
background:#48ef96;
transition:width 2s, height 2s, -webkit-transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
div:hover{
width:150px;
height: 150px;
-webkit-transform:skew(40deg,50deg);
}点击 "运行实例" 按钮查看在线实例
效果图：
过渡属性
| 属性 | 描述 | CSS版本 |
| transition | 简写属性，用于在一个属性中设置四个过渡属性 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称 | 3 |
| transition-duration | 定义过渡效果花费的时间，默认是 0 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线，默认是 "ease" | 3 |
| transition-delay | 规定过渡效果何时开始，默认是 0 | 3 |
实例
div
{
width:100px;
height: 100px;
background-color: #48ef96;
transition-property: background,-webkit-transform;
transition-duration: 4s;
transition-timing-function: linear;
transition-delay: 1s;
}
div:hover{
background:pink;
-webkit-transform:skew(40deg,50deg);
}点击 "运行实例" 按钮查看在线实例
效果图:
推荐手册