0

我有一个使用 CSS3 动画的加载圈。到目前为止，我已经编写了一些 jQuery 代码，一旦加载圆圈动画完成，就会显示一个 div 容器。是否可以用完全 CSS 编写 jQuery？任何帮助深表感谢。

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

请记住不要display:none与这些 CSS3 动画一起使用，否则它们根本不会显示。我所做的只是制作另一个最初隐藏元素的 CSS3 动画，并在 80% 时将不透明度设置为 0（再次），因此您可以开始从 80% 到 100% 的淡入淡出。

要记住的另一件事是您的浏览器与此兼容性。只需在每个动画和关键帧函数的开头添加（我以关键帧函数为例）：

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