在Mozilla中进行动画转换

时间:2014-07-02 15:49:29

标签: css animation transform scale mozilla

我在横幅中有一些我想要变换的图像(缩放)但是我想在动画执行之前这样做,因为我不希望缩放比例是动画的。以下是代码片段:

<span class="animate"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Turkish_Van_Cat.jpg/1024px-Turkish_Van_Cat.jpg" /></span>

#banner img{
zoom:0.66;
-moz-transform: scale(0.66);
-moz-transform-origin: 0 0;
-o-transform: scale(0.66);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.66);
-webkit-transform-origin: 0 0;
transform: scale(0.66); /* Standard Property */
transform-origin: 0 0;  /* Standard Property */
position: absolute;
top: 40px;
left: 50px;
}

#banner span{
-webkit-animation-duration: .6s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: .6s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-ms-animation-duration: .6s;
-ms-animation-timing-function: ease;
-ms-animation-fill-mode: both;
animation-duration: .6s;
animation-timing-function: ease;
animation-fill-mode: both;

-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-ms-animation-delay: .2s;
animation-delay: .2s;
}

1 个答案:

答案 0 :(得分:0)

您可以使用jquery设置动画 A 结束时它将启动动画 B

我认为可以找到问题的解决方案here