Question

我遇到了一个我不知道如何解决的问题。

我想让这个云在2秒后变得可见，然后在10秒后再次变得不可见。重要的是px仍然保持原样，因为云应该：

行驶
在内容区域的开头可见
在内容区域的末尾变得不可见
前往页面末尾隐身。

CSS：

.cloud1 {
  margin:18px 0px 0px 0px;
  animation:mymove 31s infinite;
  animation-delay:0s;
  position:absolute;
  z-index:1;

  /*Safari and Chrome*/
  -webkit-animation:mymove 31s infinite;
  -webkit-animation-delay:0s;
  -webkit-opacity:0 5s;
}

@keyframes mymove
{
  from {left:1050px;}
  to {left:0px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
  from {left:1050px;}
  to {left:0px;}
}

Answer 1

可以用一点技巧完成。动画设置为10秒。你可以做这样的事情。

@keyframes mymove
{

    0%   {left:0px; opacity: 0;}
    20%  {left:1050px; opacity: 1; } /* This 20% will mean 2 second on a 10 seconds scale */
    100% {opacity: 0; left: 1050px; }

}

Demo

Answer 2

使用css3的关键帧动画非常具有“异国情调”。为什么不使用jQuery并确保它成为crossbrowser？

2s后淡出，然后10s动画后淡出

2 个答案: