CSS动画，在自动幻灯片放映中淡入淡出不透明度 [英] CSS animation, fade in fade out opacity on automated slideshow

问题描述

我想制作一张幻灯片，其中图片通过淡入淡出的不透明度过渡.它只是在屏幕上闪烁，并切换到下一张图片.

I want to make a slideshow where the pictures transition through fade in fade out opacity. it just glooms on the screen and switches to the next picture.

我可以使用它，但是添加了其他浏览器Webkit，但是它停止了工作.似乎找不到我的错误..幻灯片仍然有效.

I got it to work but added the other brower webkits and it stopped working. Can't seem to find my mistake.. The slideshow still works.

这是代码:

/* Fading animation in css */
.fade {
-webkit-animation-name: fade 5s;
animation-name: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
}

@-webkit-keyframes fade {
0% {opacity: 0.2} 
50% {opacity: 1}
100% {opacity:0.2}
}

@-moz-keyframes fade{
    0% {opacity: 0.2} 
  50% {opacity: 1}
  100% {opacity:0}  
}

@keyframes fade {
  0% {opacity: 0.2} 
  50% {opacity: 1}
  100%{opacity: 0.2}
    }
@-o-keyframes fade {
0% {opacity: 0.2} 
  50% {opacity: 1}
  100%{opacity: 0.2}

}

<div class="slideshowcontainer">
        <div class="slideshow fade">
            <img src="images/PSA.PNG">
        </div>
        <div class="slideshow fade">
            <img src="images/OWSA.PNG">
        </div>
        <div class="slideshow fade">
            <img src="images/CEAC.PNG">
        </div>

推荐答案

只需将.fade类修改为此

.fade {
  -webkit-animation: fade 5s;
  animation: fade 5s;
  -moz-animation: fade 5s;
  -o-animation: fade 5s;
}

因为animation-name不需要时间间隔，所以只需要名称.

Because animation-name does not expect a timeinterval, it only expects the name.

.fade {
-webkit-animation: fade 5s;
animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
}

@-webkit-keyframes fade {
0% {opacity: 0.2} 
50% {opacity: 1}
100% {opacity:0.2}
}

@-moz-keyframes fade{
    0% {opacity: 0.2} 
  50% {opacity: 1}
  100% {opacity:0}  
}

@keyframes fade {
  0% {opacity: 0.2} 
  50% {opacity: 1}
  100%{opacity: 0.2}
    }
@-o-keyframes fade {
0% {opacity: 0.2} 
  50% {opacity: 1}
  100%{opacity: 0.2}

}

<div class="slideshowcontainer">
        <div class="slideshow fade">
            <img src="https://images-na.ssl-images-amazon.com/images/I/71%2BmEwFaoaL._SL1500_.jpg" width="200px" height: "200px">
        </div>
        </div>

这篇关于CSS动画，在自动幻灯片放映中淡入淡出不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！