前言:
关于如何在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;