transform是一个属性,本质跟width,height是一样的,加上transform也就是为类添加一个变换属性。
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;
}