没有悬停的CSS3图像过渡答案

【问题标题】：CSS3 image transitioning without hover没有悬停的CSS3图像过渡
【发布时间】：2012-08-28 13:20:12
【问题描述】：

我正在尝试找到一个过渡 CSS 代码来过渡两个图像。我希望第一张图像显示 4 秒钟，然后淡入第二张图像，该图像将保持几秒钟不变，然后淡入第一张。现在我没有使用 CSS，我发现大多数 CSS 教程都被格式化为 on :hoover。我希望我的图像在不需要 :hover 的情况下不断变化。

我现在使用的 flexi 广告编码是 ans 在 waterfox 和 explorer 中运行良好，但您可以看到在 chrome 中加载的图像闪烁不良。

这是我正在使用的示例。我现在使用的脚本实际上是在转换 30 张图像，我制作了一些从一张渐变到另一张的图像，这就是为什么它看起来像渐变的原因。我想要某种只需要 2 张图像并每 4 秒淡出一张到下一张的 CSS。

http://www.vulgarmediaproductions.com/walt/walt.shtml

【问题讨论】：

标签： image css transition

【解决方案1】：

未经测试，只是即时编写，但应该可以工作。如果您在使用它时遇到任何问题，请告诉我... 您可能想使用 FireBug for Firefox 进行调试。它可以帮助您大量使用 CSS、HTML 和 JavaScript。

CSS3：

.slideShow
{
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 200ms ease-in-out 0s;
-moz-transition: all 200ms ease-in-out 0s;
-ie-transition: all 200ms ease-in-out 0s;
-o-transition: all 200ms ease-in-out 0s;
transition: all 200ms ease-in-out 0s;
}
.slideShowWrapper { position:relative; }

HTML：

<div class="slideShowWrapper" id="mySlideShow" style="width:400px;height:300px;">
   <div class="slideShow" style="opacity:1.0"> (image 1 goes here) </div>
   <div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
   <div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
   <div class="slideShow" style="opacity:0.0"> (image N goes here) </div>
</div>

JS：

function ssCycle(_obj)
{
   var _oList=_obj.getElementsByTagName('div');
   for (var _trace=0;_trace<oList.length;_trace++)      
   {
      if(_oList[_trace].getAttribute('style').indexOf('opacity:1.0')>0)
      {
         _oList[_trace].style.opacity='0.0';
         try
         {
            _oList[(_trace+1)].style.opacity='1.0';
         }
         catch(_e)
         {
            _oList[0].style.opacity='1.0';
         }
      }
   }
};
(function(_src){ void(var tmrFunc = "void(ssCycle(document.getElementById("+_src+"));";setInterval(tmrFunc,4000);}).call('mySlideShow');

【讨论】：

【解决方案2】：

您需要为此使用keyframe animations - DEMO

HTML：

<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-45-a-web.jpg'>

CSS：

img {
    position: absolute;
    width : 320px;
    height: 180px;
}
img:last-child { animation: fader 4s infinite alternate; }
@keyframes fader { to { opacity: 0; } }

编辑

如果您的图像具有透明度，那么您需要为它们两个的不透明度设置动画，而不仅仅是顶部的那个。像这样-DEMO

img {
    opacity: 0;
    position: absolute;
    width : 256px;
    height: 256px;
}
img:first-child { animation: fadein 8s infinite alternate; }
img:last-child { opacity: 1; animation: fadeout 8s infinite alternate; }
@keyframes fadein { 50% { opacity: 1; } }
@keyframes fadeout { 50% { opacity: 0; } }

另外，请记住，您必须使用前缀（我没有使用任何前缀，因为 dabblet 包含 -prefix-free 并且这样更容易突出这个想法）：

img:first-child {
    -webkit-animation: fadein 8s infinite alternate;  /* Chrome, Safari, Android, Blackberry */
    -moz-animation: fadein 8s infinite alternate; /* FF, FF for Android */
    -o-animation: fadein 8s infinite alternate; /* Opera 12 */
    animation: fadein 8s infinite alternate; /* IE 10, FF 16+, Opera 12.5 */
}
@-webkit-keyframes fadein { 50% { opacity: 1; } }
@-moz-keyframes fadein { 50% { opacity: 1; } }
@-o-keyframes fadein { 50% { opacity: 1; } }
@keyframes fadein { 50% { opacity: 1; } }
/* same for the other set (fadeout) */

【讨论】：

@Ana.. 工作正常 :-) 谢谢