我想制作一个幻灯片,其中图片通过淡入淡出不透明度进行过渡。它只是在屏幕上变暗并切换到下一张图片。
我让它工作,但添加了其他浏览器 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">
</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;
}
Because animation-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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)