CSS3中transform,transition和animation的简单介绍和使用方法演示样例

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;

}