0

CSS3アニメーションを使用する読み込みサークルがあります。これまで、円の読み込みアニメーションが終了するとdivコンテナを表示するjQueryをコーディングしました。jQueryを完全にCSSでコーディングすることは可能ですか？どんな助けでも大歓迎です。

CSS：

/*Loading Circle*/

.x {
   height: 15px; 
   width: 15px; 
   background: #dedede; 
   border-radius: 50px; 
   display: inline-block;
}


.a {animation: fade 1s forwards;}
.b {animation: fade 2s forwards;}
.c {animation: fade 3s forwards;}


@keyframes fade {
0%   {opacity:0;}
50%  {opacity:1;}
100% {opacity:0;}}





/*Empty Container*/

.container {
   display:none; 
   background: #dedede;
   height: 100px;
   width: 100px;

}

JS：

function setup() {
  var e = document.getElementById("lastDot");
    e.addEventListener("animationend", function(){$("#mydiv").show();}, false);
}

setup()

HTML：

<div class="a x"></div>
<div class="b x"></div>
<div class="c x" id="lastDot"></div>

<div class="container" id="mydiv"></div>​

jsFiddle

4

1 に答える 1

3

これが美学のためである限り、これはあなたが探しているものでなければなりません： 

.container {
  animation: timer 3s forwards;
}

@keyframes timer {
  0% {  opacity: 0; }
  80% {  opacity: 0; }
  100% { opacity: 1;}
}

これらの CSS3 アニメーションでは使用display:noneしないでください。使用しないと、まったく表示されません。私が行ったのは、最初に要素を非表示にする別の CSS3 アニメーションを作成し、80% で不透明度を 0 (再び) に設定して、80% から 100% へのフェードを開始できるようにすることだけです。

心に留めておくべきもう 1 つのことは、これに対するブラウザの互換性です。各アニメーションとキーフレーム関数の先頭に追加するだけです (例としてキーフレーム関数を使用しています)。

@keyframes example { }
@-moz-keyframes example { } /* Firefox */
@-webkit-keyframes example { } /* Safari and Chrome */
@-o-keyframes example { } /* Opera */
于 2012-12-21T19:53:33.700 に答える