1. 程式人生 > >css3動畫的三種寫法:

css3動畫的三種寫法:

css3的三種寫法:transform、animation+css、transition+css

第一種寫法(transform):

#cricle2:hover{
transform: translate(100px,100px);
}

第二種寫法(animation+css):

#cricle1{
     animation: name 1s infinite;
}
@keyframes name{
from{
transform:scale(1) rotate(0deg);
}
to{
transform:scale(1.5) rotate(300deg);
}
}

第三種寫法(transition+css):

#cricle3{
transition: width 1s,height 4s;
}
#cricle3:hover{
width: 400px;
height: 300px;
}