html时间函数自动变色,CSS3 transition过渡效果（变形、变色、旋转、停顿时间）...

三个案例，分别用transition实现了变色 变形 旋转以及停顿时间。

直接分享代码：html>

菜鸟教程(runoob.com)

.demo1 {

width: 100px;height: 100px;background: red;

-webkit-transition: width 2s, height 2s,background 2s;

-webkit-transform 2s; /* 旋转时间 For Safari 3.1 to 6.0 */

transition: width 2s, height 2s, transform 2s, background 2s;}

.demo1:hover {width: 300px;height: 200px;background: blue;

-webkit-transform: rotate(180deg); /* 旋转角度 Chrome, Safari, Opera */

transform: rotate(180deg);/* 旋转角度*/}

/*------------------------------------------------------*/

.demo2{width:100px;height:100px;

background:red;

color: #FFF;

transition:width 2s,height 2s,background 2s;

-webkit-transition:width 2s,height 2s,background 2s; /* Safari */}

.demo2:hover{width:300px;background:blue;}

/*-----------------------------------------------------------*/

.demo3{width:100px;height:100px;background:red;

transition-property:width;

transition-duration:1s;

transition-delay:1.2s;

/* Safari */

-webkit-transition-property:width;

-webkit-transition-duration:1s;

-webkit-transition-delay:1.2s;}

.demo3:hover{width:500px;}

/* --------------------------------------------------*/

注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。

拉长拉宽、变色、旋转

拉长、变色

停顿时间、拉长、变色

对于transition一定要多多学习和熟悉使用，很多情况下可以省去写JS的烦恼。