CSS3过渡
过渡 – transition
- 控制css样式变化的过程,允许css属性值在一定的时间区间内平滑的过渡(动画形成的过程)。
- 兼容性:ie10+ 、 firefox16+ 、 chrome26+ 、safari6.1+ 、opera12.1+;
transition-property属性
- 检索或者设置对象中的参与过渡的属性;
- 语法:none | all | property;
none 没有属性变化
all 所有属性都会改变 – 默认值
property 元素属性名
transition-duration属性
- 检索或者设置对象过渡的持续时间
- 语法: time
- 参数说明:
规定完成或者效果完成所需要的花费的时间(s /ms);
默认值:0;
transition-timing-function属性
检索或者设置对象中的过渡的动画效果。
语法:transition-timing-function:
- ease 平滑过渡 等同于贝塞尔曲线(0.25,0.1,0.25,1.0),开头和结尾比较平滑,但是最后相对较快;
- linear 线性过渡 – 等同于贝塞尔曲线(0.0,0.0,1.0,1.0),突然开始,中间匀速得,再次突然停止;
- ease-in 由慢到快;
- ease-out 由快到慢;
- ease-in-out 慢-快-慢;
- step-start 一帧一帧设置;
- step-end;
- step< angle>[start | end]
transition-delay属性
- 检索或者设置对象延迟过渡的时间 – 过渡的属性是立刻执行还是延迟执行
- 语法:transition-delay:time
- 参数说明:
指定秒或者毫秒之前等待效果的开始
默认值0 – 不延迟,立即执行
transition复合属性
语法;:transition:property duration timing-function delay;
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 300px;
height: 80px;
margin: 200px auto;
background-color: #abcdef;
text-align: center;
line-height: 80px;
font-weight: bold;
font-size: 20px;
/*transform: rotate(0deg) ;*/
transition: transform 2s ease-in-out ;
}
div:hover{
transform: rotate(360deg) scale(2);
transition: transform 2s ease-in-out ;
}
</style>
</head>
<body>
<div>transition</div>
</body>
</html>