Переход CSS: непрозрачность не ногами. ,

Я пытался реализовать слайд-шоу с затухающими и исчезающими изображениями.Переход CSS: непрозрачность не ногами. ,

Но основная вещь замирания просто не будет работать для меня. Атрибут непрозрачности работает отлично. Это переход непрозрачности, который застрял.

Я нахожусь на старом ПК с XP SP3, если это имеет значение. Я использую Firefox и Chrome в качестве браузеров. Но я был в состоянии видеть другие люди, исчезают скрипки на этом ПК. Так что мне любопытно, почему мой fade-fiddle не работает, как планировалось.

Все идеи на правильном пути приветствуются.

HTML

<!DOCTYPE html> 
     <title>Test Fade</title> 

    <body> 
    <br/> 
    <br/> 

     <div id="fadeDiv" > 
    <img class="fade-in" src="https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg" /> 
     </div> 

    </body>

CSS

body {background-position: center center; 
     text-align: center; 
     width: 250px; 
     height: 250px; 
     margin: 0px auto 0px auto; 
     } 

#fadeDiv{ 
    position: relative; 
    top: 0px; 
} 

img{ 
    height: 200px; 
    width: 200px; 

} 

.fade-in{ 
    opacity: 1; 
    transition: opacity 2s linear; 
}

источник

2017-02-09 Trunk

Вы на самом деле не делают ничего, чтобы применить переход. –

Вам нужно что-то вроде этого: http://stackoverflow.com/a/41593166/4206079, но с фотографиями – Banzay

Вы должны установить начальную непрозрачность, а затем переход к другому непрозрачности, когда что-то происходит.

Наведите указатель мыши на изображение, чтобы увидеть это в действии ...

jsfiddle

body { 
 
    background-position: center center; 
 
    text-align: center; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin: 0px auto 0px auto; 
 
} 
 
#fadeDiv { 
 
    position: relative; 
 
    top: 0px; 
 
    opacity: .5; 
 
    transition: opacity 2s linear; 
 
} 
 
#fadeDiv:hover { 
 
    opacity: 1; 
 
} 
 
img { 
 
    height: 200px; 
 
    width: 200px; 
 
}

<div id="fadeDiv"> 
 
    <img class="fade-in" src="https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg" /> 
 
</div>

источник

2017-02-09 16:29:02 sol

Чтобы вызвать переход, вы должны установить новый opacity. Добавление hover селектор псевдо простой способ сделать это, вы можете также изменить непрозрачность программно в JS:

body { 
 
    background-position: center center; 
 
    text-align: center; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin: 0px auto 0px auto; 
 
} 
 
\t 
 
#fadeDiv { 
 
    position: relative; 
 
    top: 0px; 
 
} 
 

 
img { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 

 
/* changes opacity on hover and triggers transition */ 
 
img:hover { 
 
    opacity: 0.5; 
 
} 
 

 
.fade-in{ 
 
    opacity: 1; 
 
    transition: opacity 2s linear; 
 
}

<html> 
 
    <title>Test Fade</title> 
 
    <body> 
 
    <div id="fadeDiv" > 
 
     <img class="fade-in" src="https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg" /> 
 
\t </div> 
 
    </body> 
 
</html>

источник

2017-02-09 16:30:45

Спасибо за ответы. Мне нужно было что-то более автоматическое, чем переход с включенным зависанием. Я использовал короткий сценарий JS и - пока я учитываю тайминги переходов - он работает достаточно приемлемо. Я бы показал вам готовый код, если только JSFiddle работал надежно, но это не так. – Trunk

Вот еще одно решение с помощью изменения фона элемента с Fade In-Out эффект:

body {background-position: center center; 
 
     text-align: center; 
 
     width: 250px; 
 
     height: 250px; 
 
     margin: 0px auto 0px auto; 
 
     } 
 

 
#fadeDiv{ 
 
    position: relative; 
 
    top: 0px; 
 
} 
 

 
.fade-in { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-size: 100%; 
 
    background-repeat: no-repeat; 
 
    background-image: url("https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg"); 
 
    animation: bgFadeInOut 8s ease-in-out infinite; 
 
} 
 

 
@keyframes bgFadeInOut { 
 
    0% { 
 
     background-image: url("https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg"); 
 
    } 
 
    34% { 
 
     background-image: url("http://lorempixel.com/output/people-q-c-200-200-7.jpg"); 
 
    } 
 
    66% { 
 
     background-image: url("http://lorempixel.com/output/people-q-c-200-200-1.jpg"); 
 
    } 
 
    100% { 
 
     background-image: url("https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg"); 
 
    } 
 

 
}

<body> 
 
    <br/> 
 
    <br/> 
 

 
     <div id="fadeDiv" > 
 
    <div class="fade-in"></div> 
 
     </div> 
 

 
</body>

источник

2017-02-09 16:42:48 Banzay

Сортировка по вашему совету.

HTML/JS

 <!DOCTYPE html> 
    <html> 
     <meta charset="utf-8" /> 
     <title>Test Fade</title> 
     <link href="css/test2-style.css" type="text/css" rel="stylesheet" /> 
     <script type="text/javascript">function fadeIn() 
     { 
      var img = document.getElementById("photo"); 
      setInterval(function() 
      { 
       img.className = "fade-in"; // Fade in over 2 secs 
       setTimeout(function() 
       { 
        img.className = "fade-out"; // Fade out after 2 secs 
       }, 2000); 
      }, 4000); // Cycle whole process every 4 secs 
     } 
     </script> 

     <body onload="fadeIn()"> 
      <br/> 
      <br/> 

      <div id="fadeDiv"> 
       <img id="photo" class="" width="200" height="200" 
       src="https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg" /> 
      </div> 

    </html> 
</body>

CSS

body { 
    background-position: center center; 
    text-align: center; 
    width: 250px; 
    height: 250px; 
    margin: 0px auto 0px auto; 
    } 

#fadeDiv{ 
    position: relative; 
    top: 0px; 
    width: 200px; 
    height: 200px; 
} 

img{ 
    height: 200px; 
    width: 200px; 
    opacity: 0; 
} 

.fade-in{ 
    opacity: 1; 
    transition: opacity 2s linear; 
} 

.fade-out{ 
    opacity: 0; 
    transition: opacity 2s linear; 
}

источник

2017-02-10 18:20:44 Trunk

Переход CSS: непрозрачность не ногами. ,

ответ

Смежные вопросы