第四周

transition和transform和animation的区别:

* transition(过渡)

div{

width:100px;
height:100px;
background-color:red;
transition:height 2s;
}

div:hover{

height:300px;

}

 

* transform（转化）

div{

width: 500px;
height: 300px;
border: 1px solid black;
transform: rotate(180deg);
transform: scale(1,1.5)

}

 

* annimation(动画)

div{

width:100px;
height:100px;
background:red;
animation:myfirst 5s;

}

@keyframes myfirst{

0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}

}