如何在没有关键帧的情况下在我的css中链接多个-webkit-transition动画

时间:2011-09-10 12:38:16

标签: css animation css3 webkit css-animations

我正在尝试在没有关键帧的情况下在我的css中链接多个-webkit-transition动画。

我知道如果我调用一个关键帧动画是可能的,但我只是想覆盖这些礼节,这个JS中的东西不起作用:

var firstTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 1 }
var secondTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 0 }

$('theDiv').setStyles(firstTransition)

changeColor.delay(3000);

function changeColor(){

    $('theDiv').setStyles(secondTransition);
}

这是小提琴: http://jsfiddle.net/a2co/Tn9mT/25/

2 个答案:

答案 0 :(得分:0)

在你的小提琴中,元素也会获得可见性:隐藏。我认为jQuery试图变得聪明。用0.01更改0。

答案 1 :(得分:0)

可能更清洁的另一种方法是使用jQuery Transit之类的框架,它可以轻松处理与CSS3相关的链和回调:

<强>使用Javascript:

    $('#theDiv').transition({opacity: 1}, 1000, 'in', function () { 
         //Callback
         $(this).transition({opacity: 0, delay: 3000}); });

JS Fiddle Demo