如何使用关键帧动画应用CSS3变换?

时间:2012-09-28 11:45:42

标签: jquery css html5 css3 css-transforms

如何使用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

即使我添加更多元素,也只会对元素应用一个变换。

2 个答案:

答案 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)

以下是fiddle demo处理多个转换。

-webkit-transform:scale(1)  rotateY(0deg);

你需要像这样申请。