一些CSS3动画说明

Question

我一直在网上搜索css3动画的概念定义。

我从网上下载了一些示例，但我不知道使用此行代码会发生什么。

#slider li.firstanimation {
-moz-animation:cycleone 25s linear infinite;    
-webkit-animation:cycleone 25s linear infinite;     
}

和这个...

@-webkit-keyframes cycleone {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; } 
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
50% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }

有人可以解释行（代码），尤其是“ @”东西。

Answer 1

CSS3动画是基于关键帧的。 为了创建动画，您必须创建一组CSS规则并将其包装在关键帧标识符@keyframes hello {rules here}中，并将其应用于所需的任何dom元素。

当您将动画附加到元素上时，还会为其指定一个持续时间，例如10秒。 在这10秒钟内，您可以决定何时启动每个规则。 例如，

@keyframes fade {

0% {
 opacity: 1;
}
50% {
 opacity: 0;
}
100% {
 opacity: 1;
}

}

如果要在一个元素上使用该动画10秒钟，则如下所示：

.myElement {
   animation: fade 10s 1
}

然后，它将在5秒内开始逐渐消失为0，因为该规则位于一半的50％处，然后又在5秒内返回到1，共10秒。

这是动画的一目了然，如果您了解基本概念，是时候开始更具体地记录它了，因为有很多东西可以学习，而关于stackoverflow的解释也太多：)