css3中transition属性详解
css3中通过transition属性可以实现⼀些简单的动画过渡效果~
1、语法
transition: property duration timing-function delay;
transition 属性设置元素当过渡效果，是⼀个复合属性，包括四个简写属性：
transition-property：指定CSS属性的name，transition效果（默认值：all）
transition-duration（必须）：过渡效果持续时间（不指定默认为0，不会有任何效果）
transition-timing-function：指定过渡效果的转速曲线（默认值：ease）
transition-delay：指定过渡延迟开始时间（默认为0）
注意：IE9及以下不⽀持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；⽽其余⾼版本浏览器⽀持标准写法<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.tra{
width: 50px;
height: 50px;
background-color: lightcoral;
/* 复合属性 */
transition: all 2s ease 0s;
/* 采⽤以下分属性也是可以的 */
transition-duration: 2s;
transition-property: all;
transition-timing-function: ease;
transition-delay: 0s;
}
.tra:hover{
width: 200px;
}
</style>
</head>
<body>
<div class="tra"></div>
</body>
</html>
运⾏效果：
注意：在使⽤ transition 复合属性时，各个属性⽤空格隔开，不能使⽤ ,
2、分属性
（1）transition-property
transition-property属性可以指定需要过渡的css属性，默认值为all表⽰所有属性都过渡（不写该属性值也表⽰all），如果为none则没有任何属性存在过渡效果
.tra{
width: 50px;
height: 50px;
background-color: lightcoral;
/* 指定 width 属性过渡 */
transition: width 2s ease 0s;
}
.tra:hover{
width: 200px;
height: 100px;
}
<div class="tra"></div>
只指定 width 属性过渡， height 属性未指定
注意：并不是所有css属性都可以过渡，只有具备中间值的属性才有过渡效果，⽐如 display:block 不能过渡为 display:none
cssclass属性
（2）transition-duration
transition-duration属性可以⽤来设置⼀个属性过渡所需要的时间，也就是该属性从旧值到新值过渡所需时间（持续时间），默认值为0s，不指定就没有过渡效果
.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
/* 此处transition-property省略，默认为all */
/* 指定过渡时间为2s */
transition: 2s ease 0s;
}
.tra:hover{
width: 100px;
height: 100px;
}
注意：
不能为负值
必须带上单位，单独⼀个数字⽆效
该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间
.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
transition-property: width,background;
transition-timing-function: ease;
transition-duration: 5s, 2s;
/* 以上分属性等价于下⾯复合属性写法 */
transition: width 5s ease 0, background 2s ease 0;
}
.tra:hover{
width: 100px;
background-color: blue;
}
当该值为多值时，过渡属性按照顺序对应持续时间
（3）transition-timing-function
transition-timing-function属性指的是过渡的“缓动函数”，⽤来指定属性过渡时动画运动形式，值可以是关键字、贝塞尔曲线（bezier），默认值为ease
关键字：linear| ease| ease-in| ease-out| ease-in-out|
贝塞尔：cubic-bezier(n,n,n,n);
.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
/* transition-timing-function默认值为ease */
transition: 1s linear| ease| ease-in| ease-out| ease-in-out|;
}
.tra:hover{
border-radius: 50%;
background-color: blue;
}
ease ：开始和结束慢，中间快
linear ：匀速
ease-in ：开始慢，越来越快
ease-out ：结束慢，越来越慢
ease-in-out ：先加速后减速，与ease类似，但⽐ease幅度⼤
cubic-bezier(n,n,n,n) 贝塞尔曲线中4个值随意调整，就会得到不同的效果.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
transition: 1s cubic-bezier(.75,2.03,0,.14);
}
.tra:hover{
border-radius: 50%;
background-color: blue;
}
（4）transition-delay
transition-delay属性指定过渡开始前的延迟时间
.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
/* 2s过后过渡才开始执⾏ */
transition: 1s cubic-bezier(.75,2.03,0,.14) 2s;
}
.tra:hover{
border-radius: 50%;
background-color: blue;
}
3、结束语
最后再说明补充两点内容：
1、触发⽅式：transition属性并⾮只有hover才能触发，其他⽐如【点击事件】【获得/失去焦点】【长按】等操作都可以触发transition属性过渡
2、事件回调：transition属性只有⼀个事件，那就是transitionend事件，它在过渡事件完成后触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#test{
height: 60px;
width: 60px;
background-color: lightpink;
transition: width 1.5s;
font-size: 12px;
}
#test:hover{
width: 250px;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
<script>
//监听 transitionend 事件
test.addEventListener("transitionend", myFunction);
// 回调函数
function myFunction(e){
e = e || event;
test.innerHTML = "过渡结束，执⾏事件回调内容"
}
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。