transition是一个属性，它是用来控制过渡效果的，因为用transform可以增加变换效果，而那个变换是瞬间突变，如果想让这个变化是平滑的、过渡型的，则要用transition来控制，设定要控制的属性和过渡的时间即可。
animation是动画效果，要先用@keyframes定义一个动画过程，然后在类中用animation的各个参数制定想要添加的动画名称，运行时间，运行次数等等。
/* Float using transition */
.float {
transition-property: transform;
transition-duration: .3s;
}
.float:hover {
transform: translateY(-5px);
}
/* Pulse using animation*/
@keyframes pulse {
25% {
transform: scale(1.1);
}
75% {
transform: scale(.9);
}
}
.pulse { }
.pulse:hover {
animation-name: pulse;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
版权声明：本文为博主原创文章，未经博主允许不得转载。
下载本文