我想制作一个幻灯片,其中图片通过淡入淡出不透明度过渡。它只是在屏幕上黯淡并切换到下一张图片。
我让它工作了,但添加了其他浏览器 webkit,它停止工作。似乎找不到我的错误.. 幻灯片仍然有效。
这是代码:
/* 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"> …Run Code Online (Sandbox Code Playgroud)