css - 2s后淡入，10s后淡出动画

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

}

演示

Answer 2

使用 css3 的关键帧动画非常“异国情调”。为什么不使用 jQuery 并确定它是跨浏览器的呢？