css3 过渡transition的语法
transition:
众所周知,css效率极高,其变化的过程往往都是在一瞬间完成,速度极快。
CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化。这个过程可以自定义
简写属性transition:
transition是一个简写属性,用于 transition-property,transition-duration,transition-timing-function, 和transition-delay。
CSS 过渡 由简写属性 transition 定义是最好的方式,可以避免属性值列表长度不一,节省调试时间
默认值:
transition-delay: 0s
transition-duration: 0s
transition-property: all
transition-timing-function: ease
注意
在transition属性中,各个值的书写顺序是很重要的:第一个可以解析为时间的值会被赋值给transition-duration,第二个可以解析为时间的值会被赋值给transition-delay
推荐抒写顺序
过渡时间 过渡样式 过渡形式 延迟时间 [,过渡时间 过渡样式 过渡形式 延迟时间]
兼容性
transition 可以不用厂商前缀,不过鉴于标准刚刚稳定,对于基于 Webkit的浏览器仍然需要厂商前缀。如果想兼容旧版本的浏览器那么也需要厂商前缀(例如Firefox 15 及之前版本, Opera 12 及之前版本)
过渡的属性如下:
transition-property :指定过渡动画的属性(并不是所有的属性都可以动画)
transition-duration:指定过渡动画的时间(0也要带单位)
transition-timing-function:指定过渡动画的形式(贝塞尔)
transition-delay:指定过渡动画的延迟
一,transition-property 的语法
指定应用过渡属性的名称
默认值为 all,表示所有可被动画的属性都表现出过渡动画(https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties)
[描述信息](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties)
可以指定多个 property
属性值:
none
没有过渡动画。
all
所有可被动画的属性都表现出过渡动画。
IDENT
属性名称 (可以指定多个)
二,transition-duration的语法
属性以秒或毫秒为单位指定过渡动画所需的时间。
默认值为 0s ,表示不出现过渡动画。
可以指定多个时长,每个时长会被应用到由 transition-property 指定的对应属性上。如果指定的时长个数小于属性个数,那么时长列表会重复。如果时长列表更长,那么该列表会被裁减。两种情况下,属性列表都保持不变。
属性值
以毫秒或秒为单位的数值
<time> 类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ,表示不会呈现过渡动画,属性会瞬间完成转变。不接受负值。一定要加单位(不能写0 一定要写0s 1s,0s,1s)!
三,transition-timing-function的语法:
CSS属性受到 transition的影响,会产生不断变化的中间值,而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上,通过这个函数会建立一条加速度曲线,因此在整个transition变化过程中,变化速度可以不断改变
默认值:ease
你可以规定多个timing function,通过使用 transition-property属性,可以根据主列表(transition property的列表)给每个CSS属性应用相应的timing function.如果timing function的个数比主列表中数量少,缺少的值被设置为初始值(ease) 。如果timing function比主列表要多,timing function函数列表会被截断至合适的大小。这两种情况下声明的CSS属性都是有效的。
属性值:
1、ease:(加速然后减速)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier: 贝塞尔曲线
7、step-start:等同于steps(1,start)
step-end:等同于steps(1,end)
steps(<integer>,[,[start|end]]?)
第一个参数:必须为正整数,指定函数的步数
第二个参数:指定每一步的值发生变化的时间点(默认值end)
四,transition-delay的语法
transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
默认值:0s
你可以指定多个延迟时间,每个延迟将会分别作用于你所指定的相符合的css属性。如果指定的时长个数小于属性个数,那么时长列表会重复。如果时长列表更长,那么该列表会被裁减。两种情况下,属性列表都保持不变
属性值
值以秒(s)或毫秒(ms)为单位,表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果;取值为负时会导致过渡立即开始。
五,当属性值的列表长度不一致时
transition-property: background,width,height;
transition-duration: 3s,2s;
transition-delay:3s,2s;
transition-timing-function:linear;
transition-property: background,width,height;
transition-duration: 3s,2s,3s;
transition-delay:3s,2s,3s;
transition-timing-function:linear,ease,ease;
超出的情况下是会被全部截掉的
不够的时候,关于时间的会重复列表,transition-timing-function的时候使用的是默认值ease
六,检测过渡是否完成
当过渡完成时触发一个事件,在符合标准的浏览器下,这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd
(每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件)
在transition完成前设置 display: none,事件同样不会被触发
七,案例
①案例1:鼠标触发事件,过渡圆的长度高度和背景
过渡之前效果图如下:
过渡之后对效果:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#circle{
width: 200px;
height: 200px;
border-radius:50% ;
background: pink;
text-align: center;
font: 30px/100px "微软雅黑";
/*display: block;*/
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: background,width,height;
transition-duration: 1s,0s,1s;
}
body:hover #circle{
width: 100px;
height: 100px;
background:green;
/*display: none;*/
}
</style>
</head>
<body>
<div id="circle">
</div>
</body>
</html>
②案例2 hover事件 正方形变长方形,过渡时间延迟3s
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 30px/100px "微软雅黑";
/*display: block;*/
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width;
transition-duration: 5s;
transition-timing-function: linear;
transition-delay:3s;
}
body:hover #test{
width: 300px;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
③案例3:使用js绑定元素,添加过渡事件
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 30px/100px "微软雅黑";
/*display: block;*/
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width,height;
transition-duration: 2s;
transition-timing-function: linear;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var testNode = document.querySelector("#test");
var bodyNode = document.querySelector("body");
//dom0事件
bodyNode.onmouseover=function(){
testNode.style.width="300px";
testNode.style.height="300px";
setTimeout(function(){
testNode.style.display="none";
},3000)
}
//dom2
testNode.addEventListener("transitionend",function(){
alert("over")
})
}
</script>
</html>
④案例4 属性transition-property的用法问题,鼠标进来时高度有过渡,出去时宽度有过渡
代码中transition-property使用了两次,当hover的时候,transition-property立马变成了height;当出去的时候,transition-property的属性值立马变成了width
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
}
body:hover #test{
transition-property: height;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
⑤案例5, transition在元素首次渲染还没有结束的情况下是不会被触发的
注意:过渡有延迟效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
<script type="text/javascript">
//transition在元素首次渲染还没有结束的情况下是不会被触发的
// window.onload=function(){
setTimeout(function(){
var test = document.querySelector("#test");
test.style.width="300px";
},3000)
// }
</script>
</html>
⑥window.onload里面添加div,并添加过渡,渲染时间对问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test{
width: 100px;
height: 100px;
background: pink;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
//transition在元素首次渲染还没有结束的情况下是不会被触发的
window.onload=function(){
var test = document.createElement("div");
test.id="test";
document.documentElement.appendChild(test);
setTimeout(function(){
test.style.width="300px";
},2000)
}
</script>
</html>
⑦ 案例7 过渡的简写属性
效果和案例1一样
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#circle{
width: 200px;
height: 200px;
border-radius:50% ;
background: pink;
text-align: center;
font: 30px/100px "微软雅黑";
/*display: block;*/
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition: 2s 3s width,3s height;
}
body:hover #circle{
width: 100px;
height: 100px;
background:green;
}
</style>
</head>
<body>
<div id="circle">
</div>
</body>
</html>