Question

我有一个简单的问题（我认为）。

有没有办法链接CSS3动画，如：

    #element { animation: fadeIn 5s 0s linear, fadeOut 5s 25s linear ; }

    @keyframes fadeOut {
        from { opacity:1; }
        to { opacity:0; }
    }

    @keyframes fadeIn {
        from { opacity:0; }
        to { opacity:1; }
    }

在这种情况下，我认为我可以淡化和淡化具有不同延迟的不同元素。非常感谢，梅西

Answer 1

是的，您可以使用0％，25％等增量并链接整个动画。

看看this fiddle。

我所做的是使用增量网来使动画成为一个大链。

@-webkit-keyframes move {
0%   {top:  100px;
      left: 100px;
      -webkit-transform: rotate(135deg);}
25%  {top:  250px;
      left: 250px;
      -webkit-transform: rotate(135deg);}
50%  {top:  100px;
      left: 250px;
      -webkit-transform: rotate(0deg);}
75%  {top:  250px;
      left: 100px;
      -webkit-transform: rotate(-135deg);}
100% {top:  100px;
      left: 100px;
      -webkit-transform: rotate(0deg);}
}

％时间是动画应该更改的停止点，因此要在对象淡入和淡出时更改，只需相应地更改这些百分比。

链式CSS3动画

1 个答案: