CSS3中transform,transition和animation的简介和用法示例_html/css_WEB-ITnose

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;

}

版权声明：本文为博主原创文章，未经博主允许不得转载。