CSS3的 transition属性、transform属性，怎么才能让他同时执行多个不同的过渡、动画（变换属性）效果

MuGuiLin

已于 2024-11-07 21:34:16 修改

阅读量5.8w

点赞数 16

分类专栏： CSS3 文章标签： CSS3 transform属性 transform多个属性的用法 transform属性的执行顺序多个transition属性值 CSS 动画

于 2016-07-14 15:09:08 首次发布

本文链接：https://blog.youkuaiyun.com/muguli2008/article/details/51909451

版权

CSS3 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在CSS3中实现多个transition及transform效果的同时应用，包括如何正确设置transition属性来实现不同样式的过渡，以及如何使用transform属性来组合多种变换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

关于如何在CSS3的 transition属性、transform属性中，同时执行多个不同的过渡、动画（变换属性）效果。

如果想要给一个HTML标签元素，同时设置多个不同的CSS过渡transition属性值时，在各个属性值之间用逗号(英文,) 隔开即可。

如果想要给一个HTML标签元素，同时设置多个不同的CSS变换transform属性值时，在各个属性值之间用空格隔开即可。

实例代码：


div{
    width: 100px; 
    height: 100px; 
    color: green;
    background: blue; 

    <!--这里是设置所有属性过渡时间-->
    transition: all 1s; 
    
    <!--这里是分别指定设置：width、color、transform 三个样式属性的过渡！-->
    transition: width 1.5s ease, color 0.8s, transform 1s 0.5s ease-in-out; 
} 


div:hover{

    <!--这里是同时分别设置了：旋转 缩放 扭曲 三个变换属性！-->
    transform: rotate(360deg) scale(2, 2) skew(10deg, 5deg);
}

注意事项：

在设置transition的属性值时，只能设置可以连续变化的数值属性 (如：widht, height, color, opacity, font-size等！

如果设置(display, position等)这种指定的，不能连续变化的属性时，在transition中没有过渡效果的哦！

当给HTML标签元素，同时设置多个变换transform属性时它们的执行顺序，是从后向前执行的哦！

例如：

transform: rotate(360deg) scale(2, 2) skew(10deg, 5deg);

以上面变换属性中，所在的位置不同，最终呈现的效果也会不同！

所以：变换属性的位置、顺序不同，变换效果也会不同！！

扩展：

在CSS中除了以上的 transition，transform 属性可在同时设置多个属性以外，其他还有很多CSS属性也支持同时设置多个属性。

text-shadow属性

text-shadow: 0 0 5px red, 0 0 10px green, 0 0 20px blue, 0 0 40px rgb(255, 0, 255);

box-shadow属性

box-shadow: 0 0 5px 1px red, 0 0 10px 2px green, 0 0 20px 3px blue, 0 0 40px 4px rgb(255, 0, 255);

background-image属性

background-image: url('image1.jpg'), url('image2.jpg'), url('image3.jpg');
background-position: left top, center center, right bottom;
background-repeat: no-repeat, no-repeat, no-repeat;