1

2つの画像を遷移させるための遷移CSSコードを見つけようとしています。最初の画像を4秒間表示してから、2番目の画像にフェードインします。この画像は、数秒間同じままで、最初の画像にフェードバックします。現在、CSSを使用しておらず、ほとんどのCSSチュートリアルがon：hoover用にフォーマットされていることがわかりました。：hoverを必要とせずに、画像を常に変更したい。

私が現在使用しているflexi広告コーディングは、waterfoxとexplorerで正常に機能しますが、画像がクロムで読み込まれ、ちらつきが悪いことがわかります。

これが私が取り組んでいるものの例です。私が現在使用しているスクリプトは、実際には30枚の画像を遷移しており、ある画像から次の画像にフェードするため、フェードしているように見えます。2つの画像しか必要とせず、4秒ごとに次の画像にフェードするようなCSSが欲しいのですが。

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

4

2 に答える 2

1

これにはキーフレームアニメーションを使用する必要があります-デモ

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; } }

編集

画像に透明度がある場合は、上の画像だけでなく、両方の画像の不透明度をアニメーション化する必要があります。このように-デモ

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) */
于 2012-09-03T22:05:47.647 に答える
0

テストされておらず、オンザフライで書かれていますが、動作するはずです。動作に問題がある場合は、お知らせください... 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');
于 2012-09-03T21:45:42.827 に答える