我一直在尝试创建一个基于CSS3动画的滑块,我对动画和关键帧背后的逻辑感到困惑 .
这里完成了's what I':http://jsfiddle.net/fatgamer85/LzGR7
我为滑块和滑块容器内的另一个容器创建了一个容器,它可以容纳div或图像 . 在这种情况下,我决定为启动器添加一些图像 .
<div class="slider">
<div class="slide"><span class="image"></span></div>
<div class="slide"><span class="image"></span></div>
<div class="slide"><span class="image"></span></div>
<div class="slide"><span class="image"></span></div>
<div class="slide"><span class="image"></span></div>
</div>
然后使用CSS我绝对定位了这些容器和图像 .
*, body, html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.slider{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.slide{
position: absolute;
width: 100%;
height: 100%;
}
.slide .image{
float: left;
position: absolute;
}
然后我继续将我的动画规则添加到.slide类
.slide
{
animation: myanimation 48s ease-in-out infinite;
-webkit-animation: myanimation 48s ease-in-out infinite;
-o-animation: myanimation 48s ease-in-out infinite;
-moz-animation: myanimation 48s ease-in-out infinite;
-ms-animation: myanimation 48s ease-in-out infinite;
}
并使用nth-child伪类分别为每个类添加动画规则 .
我观察到图像显示的顺序错误,因此我将z-index分别添加到这些类中
.slide:nth-child(1){
animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
-ms-animation-delay: 0s;
z-index:1;
}
.slide:nth-child(2){
animation-delay: 8s;
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
z-index:2;
}
..... and so on...
并开始向 Span 添加图像
.slide:nth-child(1) .image {
background-image: url('http://i.imgur.com/9yvKmZY.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.slide:nth-child(2) .image {
background-image: url('http://i.imgur.com/j8mBdLD.jpg');
background-repeat: no-repeat;
background-size: cover;
}
..... and so on...
最后添加了关键帧规则
@-webkit-keyframes myanimation {
0%{
opacity: 1;
}
25% {
opacity: 0;
}
}
一切看起来都很精致 . 但是当Image开始制作动画时问题就出现了 . 我猜我还没有完全掌握动画的概念..
因此,幻灯片放映了疯狂的动画,并有自己的想法 . 有时它甚至没有显示图像的正确顺序,或者它完全跳过图像 .
谁能告诉我我做错了什么或我哪里出错了?
以下是滑块的全屏示例:http://fiddle.jshell.net/fatgamer85/LzGR7/23/show/light/
2 回答
幻灯片有一件事,如果你不知道它会让你失去很多时间 .
如果你将动画推迟到将来,第一个cicle与其他cicle不同 . 大多数元素具有来自静态属性的属性,而不是来自动画 .
为了避免这种问题,请将动画延迟设置为过去 . 这样,第一个动画周期与其他动画周期相同 .
此外,给自己一些帮助是很好的 . 在这种情况下,我在幻灯片的左侧设置了数字 . 通过这种方式,您可以看到真正发生的事情 .
此外,我已经修改了一些你的关键帧,在网络上的webkit错误 .
CSS
corrected demo
快乐的编码!
在上面的演示中,第五张图像在动画开始时会出现一点点时间 . 这可以通过调整关键帧来纠正:
如果你用一张纸画出来,你会明白为什么;但很难解释
new demo
关于你的小提琴,你犯2个错误 . 问题在于你认为条形图在某种程度上“在框架内部”,并且受到“时间”的约束 . 这不是真的,你正在使用40秒的循环,并且条形图必须使用该动画时间(不是9秒,并且帧在这9秒的分数中) .
你最好的选择是只有1巴,让它骑得更快(10秒) .
CSS
或者,如果需要,为每张幻灯片设置1个 Span ,但随后保留动画时间和延迟 .
根据您的代码,您已正确掌握动画(关键帧) . 我认为问题在于z-index,你应该删除它 . 你错过了关于幻灯片nth-child的一个小细节 . 你必须将nth-childs不透明度设置为0.我会将理解留给你:)