0

解決方法がわからない問題があります。

この雲を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;}
}
4

2 に答える 2

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

}

デモ

于 2013-03-18T22:24:01.580 に答える
0

css3 を使用したキーフレーム アニメーションは非常に「エキゾチック」です。jQuery を使用してクロスブラウザ化してみませんか?

于 2013-03-18T22:20:00.133 に答える