CSS3链接动画

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; }
    }

在这种情况下，我认为我可以使用不同的延迟时间淡入和淡出不同的元素。 非常感谢， Lionel

- Lionel

---

嘿，请给我的问题点赞，如果你觉得它对你有用的话。 - Ilan Biala

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);}
}

% 时间是动画应该改变的停止点，因此要更改对象淡入淡出的时间，请相应地更改这些百分比。

- Ilan Biala

---

谢谢Ilan。如果我想控制淡入淡出的时间以及何时淡入和淡出怎么办？ - Lionel

淡入和淡出？你希望它们何时发生？ - Ilan Biala

如果您觉得我的回答解决了您的问题，请给我点赞并将其标记为最佳答案。 - Ilan Biala