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

有人可以解释这些行（代码），特别是＆＃34; @＆＃34;的事情。

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上解释太多:)享受

一些CSS3动画解释

1 个答案: