css3中使用过渡功能可以使元素的css属性值在一定时间区间内平滑过渡,可在元素被点击,hover,做焦点,或对元素做任何改变时触发。例如hover时,可从一种颜色平滑过渡到另一种颜色。
一.写法
例如,下面的div原来的宽度是100px, 在hover的时候将其宽度width,在1s内,匀速变为200px,等待2s再变化
<style>
div
{
width:100px;
height:100px;
background:yellow;
/*需要过渡效果的属性,过渡所需秒数,过渡方式,过渡等待时间*/
transition:width 1s linear 2s;
-moz-transition:width 1s linear 2s;
-webkit-transition:width 1s linear 2s;
-o-transition:width 1s linear 2s;
}
div:hover
{
width:200px;
}
</style>
可见,transition:指定变化需要过渡的属性 变形所需时间 变形方式 变化等待时间
1.指定需要过渡的属性transition-property,可写为:
none 不对任何属性变化进行过渡
all 对所有属性变化进行过渡
属性名1,属性名2 如: width,color,background
2.过渡所需秒数transition-duration 2s 表示2秒
3.过渡方式transition-timing-function有
值 | 描述 |
---|---|
linear | 匀速过渡(等于 cubic-bezier(0,0,1,1))。 |
ease | 慢速开始,再变快,然后慢速结束(cubic-bezier(0.25,0.1,0.25,1))。 |
ease-in | 以慢速开始(等于 cubic-bezier(0.42,0,1,1))。 |
ease-out | 以慢速结束(等于 cubic-bezier(0,0,0.58,1))。 |
ease-in-out | 以慢速开始和结束(等于 cubic-bezier(0.42,0,0.58,1))。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
4.过渡等待的秒数transtion-delay 5s 指示过渡在5s后开始
二.指定多个属性不同的过渡时间和过渡方式
例如: transition: color 1s linear 0 , width 2s ease-in 1s
表示过渡方式是 首先color匀速变化用时1秒,1秒后width加速变化用时2秒。可写多个,以逗号分隔即可。
三.transition设定的四个参数其实是同时设置了如下四个属性,这四个属性可单独设置,如下:
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
四.例子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转着变大</title>
<style>
div{
border-radius:5px;
width: 90px;
height:60px;
background-color: yellowgreen;
color:white;
text-align: center;
/*指定变形如何过渡*/
transition:background-color,transform 1s linear 0s;
-moz-transition:background-color,transform 1s linear 0s;
-webkit-transition:background-color,transform 1s linear 0s;
-o-transition:background-color,transform 1s linear 0s;
}
div:hover{
background-color: blue;
/*指定变形方式*/
-ms-transform: rotate(360deg) scale(1.2,1.2) ;
-moz-transform:rotate(360deg) scale(1.2,1.2);
-webkit-transform:rotate(360deg) scale(1.2,1.2);
-o-transform:rotate(360deg) scale(1.2,1.2);
transform:rotate(360deg) scale(1.2,1.2);
}
</style>
</head>
<body>
<h1>用1秒钟时间 顺时针旋转360度 同时把宽高放大到原来的1.2倍</h1>
<div>
<br>
Css3过渡
</div>
</body>
</html>