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;
}
版权声明：本文为博主原创文章，未经博主允许不得转载。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
910
