本文介绍了CSS动画,在自动幻灯片放映中淡入淡出不透明度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想制作一张幻灯片,其中图片通过淡入淡出的不透明度过渡.它只是在屏幕上闪烁,并切换到下一张图片.
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动画,在自动幻灯片放映中淡入淡出不透明度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!