CSS3幻灯片动画问题_Css_Animation_Webkit_Slideshow

CSS3幻灯片动画问题

css animation

CSS3幻灯片动画问题,css,animation,webkit,slideshow,Css,Animation,Webkit,Slideshow,我一直在尝试创建一个基于CSS3动画的滑块，我对动画和关键帧背后的逻辑感到困惑以下是我所做的：我为滑块创建了一个容器，并在滑块容器内创建了另一个容器，用于保存div或图像。在本例中，我决定为初学者添加一些图像 <div class="slider"> <div class="slide"><span class="image"></span></div> <div class="slide"><sp

我一直在尝试创建一个基于CSS3动画的滑块，我对动画和关键帧背后的逻辑感到困惑

以下是我所做的：

我为滑块创建了一个容器，并在滑块容器内创建了另一个容器，用于保存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>

然后，我开始将动画规则添加到.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;
}

并使用第n个子伪类分别向每个类添加动画规则

我注意到图像的显示顺序错误，所以我分别向这些类添加了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...

并开始在跨度中添加图像

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

一切看起来都很好。。但是当图像开始设置动画时，问题就开始了。我想我还没有完全掌握动画的概念

因此，幻灯片会变得疯狂，并有自己的想法。有时它甚至没有显示图像的正确顺序，或者完全跳过图像

谁能告诉我我做错了什么或哪里做错了

下面是滑块的全屏示例：

根据您的代码，您已经正确掌握了动画（关键帧）。我认为问题在于z索引，你应该删除它。你错过了关于第N个孩子的一个小细节。必须将第n个孩子的不透明度设置为0。我将把谅解留给你：）

如果你不知道，幻灯片有一点会让你浪费很多时间

如果将动画延迟到将来，则第一个循环与其他循环不同。大多数元素的属性来自静态属性，而不是动画

要避免此类问题，请将动画延迟设置为过去。这样，第一个动画周期与其他动画周期相等

另外，给自己一些帮助也很好。在本例中，我在幻灯片左侧设置了数字。这样，你就可以真正看到发生了什么

此外，我已经修复了一点关键帧，至少webkit的关键帧是错误的

CSS

快乐编码

在上面的演示中，第五幅图像在动画开始时出现一段时间。这可以通过调整关键帧来纠正：

@keyframes myanimation {
 0%{opacity: 1; }
    15%{opacity: 1; }
    20%{opacity: 0; }
95% {opacity: 0;}
   100% {opacity: 1;}
}

如果你把它画在一张纸上，你就会明白为什么；但这很难解释

关于你摆弄吧台，你犯了两个错误。问题是，你认为酒吧不知何故是“内部”的框架，并有一定的“时间”。这是不正确的，您使用的是40秒的循环，并且该条必须使用该动画时间（不是9秒，帧以9秒的分数表示）

您最好的选择是只有1巴，并使其循环更快（10秒）

CSS

或者，如果需要，为每张幻灯片设置1个跨度，但要保留动画时间和延迟。

摆弄小提琴时，z索引值似乎会引起问题。例如，一旦图像（3）完成，不透明度开始接近0，因为图像1具有最高的z索引，它正在显示。我不完全确定，如果这是导致问题的原因，如果我删除z索引，过渡不会发生。我将第5个元素的延迟属性改为第1个元素，以查看它是否解决了任何问题，但没有。我删除了z索引，并为所有第n个子类添加了不透明度。动画仍然没有达到标准，因为它很快就消失了，甚至没有显示幻灯片！Hi VAL，使用负值计时是否为标准做法？对不起，我对这件事不太了解。另外，为什么webkit的关键帧百分比与其他关键帧不同？是的，这是实现该效果的标准实践。关于百分比，我修正了webkit，然后编辑了其他的；看起来我忘了更新一些。那么如何阻止第5帧首先显示？我是隐藏它还是有其他的方法呢？添加了带有正确代码的演示。很难解释如何计算！你能看看这个，告诉我怎么了吗？

.slide:nth-child(3){
    animation-delay: 16s;
    -webkit-animation-delay: 16s;   
    -moz-animation-delay: 16s;
    -o-animation-delay: 16s;    
    -ms-animation-delay: 16s;   
    opacity:0;
}

*, 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%;
    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;
    font-size: 100px;
    color: red;
}

.slide .image{
    float: left;
    position: absolute;
}

.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:5;
}
.slide:nth-child(2){
    animation-delay: -40s;
    -webkit-animation-delay: -40s;  
    -moz-animation-delay: -40s;
    -o-animation-delay: -40s;   
    -ms-animation-delay: -40s;
    z-index:4;
}
.slide:nth-child(3){
    animation-delay: -30s;
    -webkit-animation-delay: -30s;  
    -moz-animation-delay: -30s;
    -o-animation-delay: -30s;   
    -ms-animation-delay: -30s;  
    z-index:3;
}
.slide:nth-child(4){
    animation-delay: -20s;
    -webkit-animation-delay: -20s;  
    -moz-animation-delay: -20s;
    -o-animation-delay: -20s;   
    -ms-animation-delay: -20s;  
    z-index:2;
}
.slide:nth-child(5){
    animation-delay: -10s;
    -webkit-animation-delay: -10s;  
    -moz-animation-delay: -10s;
    -o-animation-delay: -10s;   
    -ms-animation-delay: -10s;
    z-index:1;
}

@keyframes myanimation {
    0%{ opacity: 0; }
    5%{opacity: 1; }
    20%{opacity: 1; }
    25% {opacity: 0;}
    100% {opacity: 0;}
}

@-webkit-keyframes myanimation {
    0%{ opacity: 0; }
    5%{opacity: 1; }
    20%{opacity: 1; }
    25% {opacity: 0;}
    100% {opacity: 0;}
}
@-o-keyframes myanimation {
    0%{ opacity: 1; }
    25% { opacity: 0.75; }
    50%{ opacity: 0.5; }
    75% { opacity: 0.25; }
    100%{ opacity: 0; }
}
@-moz-keyframes myanimation {
    0%{ opacity: 1; }
    25% { opacity: 0.75; }
    50%{ opacity: 0.5; }
    75% { opacity: 0.25; }
    100%{ opacity: 0; }
}
@-ms-keyframes myanimation {
    0%{ opacity: 0; }
    5%{opacity: 1; }
    20%{opacity: 1; }
    25% {opacity: 0;}
    100% {opacity: 0;}
}

@-webkit-keyframes myanimation {
    0%{ opacity: 0; }
    5%{opacity: 1; }
    20%{opacity: 1; }
    25% {opacity: 0;}
    100% {opacity: 0;}
}
.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;
}
.slide:nth-child(3) .image {
    background-image: url('http://i.imgur.com/9VdDjQi.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
.slide:nth-child(4) .image {
    background-image: url('http://i.imgur.com/dqCWOgW.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
.slide:nth-child(5) .image {
    background-repeat: no-repeat;
    background-image: url('http://i.imgur.com/0hUMMuT.jpg');
    background-size: cover;
}

@keyframes myanimation {
 0%{opacity: 1; }
    15%{opacity: 1; }
    20%{opacity: 0; }
95% {opacity: 0;}
   100% {opacity: 1;}
}

*, body, html{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.slider{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 400px;
}

.slide{
    position: absolute;
    width: 100%;
    height: 100%;
    animation: bg_anim 50s ease-in-out infinite;
    -webkit-animation: bg_anim 50s ease-in-out infinite;
    -o-animation: bg_anim 50s ease-in-out infinite;
    -moz-animation: bg_anim 50s ease-in-out infinite;
    -ms-animation: bg_anim 50s ease-in-out infinite;
}

.slide .image{
    float: left;
    position: absolute;
}

.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:5;
}
.slide:nth-child(2){
    animation-delay: -40s;
    -webkit-animation-delay: -40s;  
    -moz-animation-delay: -40s;
    -o-animation-delay: -40s;   
    -ms-animation-delay: -40s;
    z-index:4;
}
.slide:nth-child(3){
    animation-delay: -30s;
    -webkit-animation-delay: -30s;  
    -moz-animation-delay: -30s;
    -o-animation-delay: -30s;   
    -ms-animation-delay: -30s;  
    z-index:3;
}
.slide:nth-child(4){
    animation-delay: -20s;
    -webkit-animation-delay: -20s;  
    -moz-animation-delay: -20s;
    -o-animation-delay: -20s;   
    -ms-animation-delay: -20s;  
    z-index:2;
}
.slide:nth-child(5){
    animation-delay: -10s;
    -webkit-animation-delay: -10s;  
    -moz-animation-delay: -10s;
    -o-animation-delay: -10s;   
    -ms-animation-delay: -10s;
    z-index:1;
}

.text{
    right: 0px;
    color: #fff;
    font-size: 28px; 
    float: right;
    z-index:1;
}

.text:nth-child(1){
    z-index:5;  
}

.text:nth-child(2){
    z-index:4;  
}

.text:nth-child(3){
    z-index:3;  
}

.text:nth-child(4){
    z-index:2;  
}

.text:nth-child(5){
    z-index:1;  
}


.bar{
    position: absolute;
    width: 45%;
    height: 400px;
    right: -20px;
    float: right;
    z-index: 99;
    animation: bar_anim 10s infinite ease-in-out;
    -webkit-animation: bar_anim 10s infinite ease-in-out;
    -o-animation: bar_anim 10s infinite ease-in-out;
    -moz-animation: bar_anim 10s infinite ease-in-out;
    -ms-animation: bar_anim 10s infinite ease-in-out;
    animation-delay: -1.5s;
    -webkit-animation-delay: -1.5s; 
    -moz-animation-delay: -1.5s;
    -o-animation-delay: -1.5s;  
    -ms-animation-delay: -1.5s;
}

.slide:nth-child(1) > .bar{
    animation-delay: 0s;
    -webkit-animation-delay: 0s;    
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s; 
    -ms-animation-delay: 0s;
}

.slide:nth-child(2) > .bar{
    animation-delay: -7.2s;
    -webkit-animation-delay: -7.2s; 
    -moz-animation-delay: -7.2s;
    -o-animation-delay: -7.2s;  
    -ms-animation-delay: -7.2s;
    z-index:4;
}

.slide:nth-child(3) > .bar{
    animation-delay: -5.4s;
    -webkit-animation-delay: -5.4s; 
    -moz-animation-delay: -5.4s;
    -o-animation-delay: -5.4s;  
    -ms-animation-delay: -5.4s;
    z-index:3;
}

.slide:nth-child(4) > .bar{
    animation-delay: -3.6s;
    -webkit-animation-delay: -3.6s; 
    -moz-animation-delay: -3.6s;
    -o-animation-delay: -3.6s;  
    -ms-animation-delay: -3.6s;
    z-index:2;
}

.slide:nth-child(5) > .bar{
    animation-delay: -1.8s;
    -webkit-animation-delay: -1.8s; 
    -moz-animation-delay: -1.8s;
    -o-animation-delay: -1.8s;  
    -ms-animation-delay: -1.8s;
    z-index:1;
}

@keyframes bar_anim {
    0%   {  right: -4000px; }
    10%  { right: 0px;  }
    15%  { right: -20px;}
    80%  { right: -20px;}
    95%  { right: 0px;  }
    100% { right: -4000px; }
}
@-o-keyframes bar_anim {
    0%{ right: -4000px; }
    10%{        right: 0px; }
    15%{        right: -20px;   }
    80% {       right: -20px;   }
    95% {       right: 0px; }
    100% {      right: -4000px; }
}
@-moz-keyframes bar_anim {
    0%{         right: -4000px; }
    10%{        right: 0px; }
    15%{        right: -20px;   }
    80% {       right: -20px;   }
    95% {       right: 0px; }
    100% {      right: -4000px; }
}
@-ms-keyframes bar_anim {
    0%{         right: -4000px; }
    10%{        right: 0px; }
    15%{        right: -20px;   }
    80% {       right: -20px;   }
    95% {       right: 0px; }
    100% {      right: -4000px; }
}
@-webkit-keyframes bar_anim {
    0%{         right: -4000px; }
    10%{        right: 0px; }
    15%{        right: -20px;   }
    80% {       right: -20px;   }
    95% {       right: 0px; }
    100% {      right: -4000px; }
}

@keyframes bg_anim {
    0%{         opacity: 1; }
    15%{
        opacity: 1;
    }
    20%{
        opacity: 0;
    }
    95% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes bg_anim {
    0%{
        opacity: 1;
    }
    15%{
        opacity: 1;
    }
    20%{
        opacity: 0;
    }
    95% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes bg_anim {
    0%{
        opacity: 1;
    }
    15%{
        opacity: 1;
    }
    20%{
        opacity: 0;
    }
    95% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes bg_anim {
    0%{
        opacity: 1;
    }
    15%{
        opacity: 1;
    }
    20%{
        opacity: 0;
    }
    95% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes bg_anim {
    0%{
        opacity: 1;
    }
    15%{
        opacity: 1;
    }
    20%{
        opacity: 0;
    }
    95% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}