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