CSS3中的transition(过渡)
- transition是CSS3中具有特殊功能的特性之一,可以不使用flash动画或者JS计时器的情况下,当元素从一种样式变为另一种样式时为元素添加过渡效果.
浏览器支持情况
- Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
- Safari 支持替代的 -webkit-transition 属性。
注意：
- Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
transition简写语法
transition: property(要过渡的属性) duration(花费的时间) timing-function(运动曲线) delay(何时开始);
transition属性
| 属性值 |
描述 |
| transition-property |
指定CSS属性的name,比如宽度,高度,如果想要所有的属性都进行变化，写一个all即可 |
| transition-duration |
transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function |
指定transition效果的转速曲线,默认是ease(逐渐变慢)还有其他的参数linear(匀速)、ease-in(加速)、ease-out(减速)、ease-in-out(先加速再减速) |
| transition-delay |
定义transition效果开始的时候,单位是秒(s). |
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3transition动画</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
margin: 50px auto;
transition: all 2s ease;
}
div:hover {
background-color: pink;
width: 500px;
height: 500px;
position: relative;
top: 50px;
left: 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>