【问题标题】:Chained CSS3 Animation链式 CSS3 动画
【发布时间】:2012-12-08 20:00:18
【问题描述】:

我有一个简单的问题(我想)。

有没有办法像这样链接 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; }
    }

在这种情况下,我想我可以以不同的延迟淡入和淡出不同的元素。 非常感谢, 莱昂内尔

【问题讨论】:

  • 嘿,如果您觉得我的问题对您有用,请点赞。

标签: css animation css-transitions


【解决方案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);}
}

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

【讨论】:

  • 谢谢伊兰。如果我想控制淡入淡出的时间以及淡入淡出的时间怎么办?
  • 淡入淡出?你希望这些事情发生在什么时候?
  • 如果您觉得我的回答回答了您的问题,请点赞我的回答并将其标记为最佳答案。
猜你喜欢
  • 2011-12-11
  • 2018-01-01
  • 2014-04-17
  • 2020-11-14
  • 1970-01-01
  • 2012-09-14
  • 1970-01-01
  • 2012-12-09
  • 1970-01-01
相关资源
最近更新 更多