1.transition 

div {

width: 50px;

height: 50px;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */

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

}

div:hover {

width: 100px;

height: 100px;

-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */

transform: rotate(90deg);

}

2.animation

div

{

animation:myfirst5s linear2s infinite alternate;

/* Safari与Chrome: */

-webkit-animation:myfirst5s linear2s infinite alternate;

}

@keyframes myfirst

{

0%{background:red;left:0px;top:0px;}

25%{background:yellow;left:200px;top:0px;}

50%{background:blue;left:200px;top:200px;}

75%{background:green;left:0px;top:200px;}

100%{background:red;left:0px;top:0px;}

}

@-webkit-keyframes myfirst/* Safari与Chrome */

{

0%{background:red;left:0px;top:0px;}

25%{background:yellow;left:200px;top:0px;}

50%{background:blue;left:200px;top:200px;}

75%{background:green;left:0px;top:200px;}

100%{background:red;left:0px;top:0px;}

}