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;}
}
