如何使用CSS3动画应用多个变换?
这是我的HTML代码:
<div class="container">
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
</div>
我的尝试:
@-webkit-keyframes firstanim{
from{
-webkit-transform:scale(1);
-webkit-transform:rotate(0deg);
backgroud:skyblue;
left:0px;
-webkit-transform: rotateY(0deg);
} to{
-webkit-transform:rotate(360deg);
-webkit-transform:scale(1.5);
background:orange;
left:100px;
-webkit-transform: rotateY(360deg);
}
}
.container{
border:1px solid black;
padding:20px;
width:250px;
height:50px;
position:realtive;
}
.cell{
width:25px;
height:25px;
background:skyblue;
float:left;
display:inline-block;
margin:0px 5px;
position:relative;
-webkit-animation: firstanim 3s infinite;
}
.inner{
width:100%;
height:50%;
float:left;
border:1px solid white;
border-left-width:0px;
borer-right-width:0px;
}
结果位于here。
即使我添加更多元素,也只会对元素应用一个变换。
答案 0 :(得分:5)
如果你写这样的话:
transform: rotate(30deg);
transform: scale(3);
然后第二个覆盖第一个,你的元素只是缩放,而不是旋转。
为了将多个变换应用于单个元素,您需要将它们链接起来。
示例:
transform: rotate(30deg) scale(3) translateX(3em) skewY(60deg);
此外,您应用它们的顺序很重要,根据所选顺序,您可能会得到不同的结果 - 请参阅this example,其中蓝色框的形状不同应用相同的两个变换后的红色,但顺序相反。
你的链式转换小提琴:http://jsfiddle.net/TBrf2/4/
答案 1 :(得分:2)